Два столбца с центрированным контентом с разделителем

Question

Кажется, я не могу это сделать правильно. Я создаю мобильное приложение (ionic/AngularJS), и я хочу нижнюю панель (нижний колонтитул), разделенную на две коробки с зазором посередине. У каждой стороны был бы текст, центрированный непосредственно посередине.

Это будет соответствовать полной ширине (100%).

Я создал его в скрипкой:

http://jsfiddle.net/MYwPt/112/

Мой HTML:

<div class="faketab"> 
    <table> 
     <tr> 
      <td>LEFT BOX</td> 
      <td class="centerpiece"></td> 
      <td>RIGHT BOX</td> 
     </tr> 
    </table> 
</div> 

CSS:

.faketab 
{ 
    display: -webkit-box; 
    -webkit-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -webkit-flex-direction: horizontal; 
    flex-direction: horizontal; 
    -webkit-box-pack: center; 
    justify-content: center; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    border-color: #b2b2b2; 
    background-color: #f8f8f8; 
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); 
    color: #4d4d4d; 
    position: absolute; 
    bottom: 0; 
    z-index: 5; 
    width: 100%; 
    /* height: 49px; */ 
    border-style: solid; 
    border-top-width: 1px; 
    background-size: 0; 
} 
.faketab table tr td { 
    width: 2em; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align:center; 
    vertical-align: middle; 
    font-size:18px; 
} 
.centerpiece{ 
    border-left: 0.1em solid black; 
} 

Answer 1

Вот уборка и простая структура, которая делает все, что вы просите.

Редактировать: This fiddle имеет префикс flex атрибуты.

Редактировать 2: This fiddle имеет display: table вместо flex и будет работать до IE8.

.faketab { 
 
    display: flex; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 0 2px 2px;   /* space around buttons */ 
 
} 
 
.faketab > div:first-child { 
 
    margin-right: 2em;   /* space between boxes */ 
 
} 
 
.faketab > div { 
 
    width: 50%; 
 
    height: 60px; 
 
    font-size:18px; 
 
    border: 2px solid #b2b2b2; 
 
    background-color: #f8f8f8; 
 
    color: #4d4d4d; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div class="faketab"> 
 
    <div>BUTTON</div> 
 
    <div>BUTTON 2</div> 
 
</div>

Answer 2

Что вам нужно сделать, это добавить display: table-cell для каждого td, а затем изменить код, подобный следующему:

HTML

<div class="faketab"> 
    <table> 
     <tr> 
      <td>LEFT BOX</td> 
      <td>RIGHT BOX</td> 
     </tr> 
    </table> 
</div> 

CSS

.faketab table tr td { 
    display: table-cell; 
    width: 1%; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align:center; 
    vertical-align: middle; 
    font-size:18px; 
} 

.faketab table tr td:last-child { 
    border-left: 1px solid black; 
} 

DEMO

Вы можете сделать тот же результат с меньшим кодом разметки и более чистого кода, который может работать на мобильных устройствах.

1. <a> ссылки

HTML

<div class="tabs tabs--block"> 
    <a href="#" class="tabs__item">Left tab title</a> 
    <a href="#" class="tabs__item">right tab title</a> 
</div> 

CSS

.tabs { 
    width: 320px; 
    margin: 100px auto; 
    border: 1px solid #000; 
} 

.tabs--block .tabs__item { 
    display: block; 
    width: 50%; 
    float: left; 
    padding: 1em; 
    text-align: center; 
    box-sizing: border-box; 
    text-decoration: none; 
} 

.tabs--block .tabs__item:last-child { 
    border-left: 1px solid #000; 
} 

.tabs--block:after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

.tabs--block .tabs__item { 
    display: block; 
    width: 50%; 
    float: left; 
    padding: 1em; 
    text-align: center; 
    box-sizing: border-box; 
    text-decoration: none; 
} 

.tabs--block .tabs__item:last-child { 
    border-left: 1px solid #000; 
} 

2.Flexbox

HTML

<div class="tabs tabs--flex"> 
<a href="#" class="tabs__item">Left tab title</a> 
    <a href="#" class="tabs__item">right tab title</a> 
</div> 

CSS

.tabs--flex { 
    display: flex; 
} 

.tabs--flex .tabs__item { 
    flex: 0 0 50%; 
    padding: 1em; 
    text-align: center; 
    box-sizing: border-box; 
    text-decoration: none; 
} 

.tabs--flex .tabs__item:last-child { 
    border-left: 1px solid #000; 
} 

DEMO

Answer 3

Используется для этого CSS border-spacing недвижимости

table{border-spacing: 0;} 

table{border-spacing: 0;} 
 

 
.faketab 
 
{ 
 
    display: -webkit-box; 
 
    -webkit-box-direction: normal; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-flex-direction: horizontal; 
 
    flex-direction: horizontal; 
 
    -webkit-box-pack: center; 
 
    justify-content: center; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    border-color: #b2b2b2; 
 
    background-color: #f8f8f8; 
 
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); 
 
    color: #4d4d4d; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 5; 
 
    width: 100%; 
 
    /* height: 49px; */ 
 
    border-style: solid; 
 
    border-top-width: 1px; 
 
    background-size: 0; 
 
} 
 
.faketab table tr td { 
 
    width: 2em; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    text-align:center; 
 
    vertical-align: middle; 
 
    font-size:18px; 
 
} 
 
.centerpiece{ 
 
    border-left: 0.1em solid black; 
 
}

<div class="faketab"> 
 
    <table> 
 
     <tr> 
 
      <td>LEFT BOX</td> 
 
      <td class="centerpiece"></td> 
 
      <td>RIGHT BOX</td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 4

Просто добавьте следующие свойства и может изменять ширину и высоту сНу в соответствии с дизайном вам необходимо:

.faketab td{ 
     float:left; 
     width:45%; 
     border:1px solid #000; 
     height:100px; 
    } 
    .centerpiece{ 
     width:3% !important; 
     float:left !important; 
    } 

Answer 5

Пожалуйста, используйте «flex- направление "и заполнение для класса под названием 'fake Вкладка таблицы тр тд»

HTML

<div class="faketab"> 
     <table> 
      <tr> 
       <td>LEFT BOX</td> 
       <td class="centerpiece"></td> 
       <td>RIGHT BOX</td> 
      </tr> 
     </table> 
    </div> 

CSS

.faketab 
{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -webkit-flex-direction: horizontal; 
    -moz-flex-direction: horizontal; 
    -ms-flex-direction: horizontal; 
    flex-direction: horizontal; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    -moz-justify-content: center; 
    justify-content: center; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    border-color: #b2b2b2; 
    background-color: #f8f8f8; 
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); 
    color: #4d4d4d; 
    position: absolute; 
    bottom: 0; 
    z-index: 5; 
    width: 100%; 
    /* height: 49px; */ 
    border-style: solid; 
    border-top-width: 1px; 
    background-size: 0; 
} 
.faketab table tr td { 
    width: 1em; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    text-align:center; 
    vertical-align: middle; 
    font-size:18px; 
    flex-direction:row; 
    padding:0 50px 0 10px; /* this */ 
} 
.centerpiece{ 
    border-left: 0.1em solid black; 
} 

Answer 6

Я предпочитаю использовать дивы. Вам нужно установить только свойство отображения в строку и поплавок влево. Для текста text-align: center.

body{ 
 
    margin:0; 
 
} 
 
.faketab{ 
 
    display:inline-block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width:100%; 
 
    border-top:1px solid; 
 
} 
 

 
.tabs{ 
 
    float:left; 
 
    width:49.5%; 
 
    text-align:center; 
 
} 
 

 
.tabs:hover{ 
 
    color: #B0B0B0; 
 
} 
 

 
.vertical{ 
 
    float:left; 
 
    border-left:1px solid; 
 
    height:15px; 
 
}

<div class="faketab"> 
 
    <div class="tabs">LEFT BOX</div> 
 
    <span class="vertical"></span> 
 
    <div class="tabs">RIGHT BOX</div> 
 
</div>

Успехов!