html - 如何将位于包裹的 div 内的标签居中？

Question

我有一个包含柱状数据的长 div:

A very
Big chicken
Comes to
Dine with us
Every day

我用了下面的样式

<div style="flex: 1; width: 180px; height: 100%;">
    <div style="height: 100%; display: flex; flex-wrap: wrap; flex-direction: column;">
        <div>A very</div>
        <div>Big chicken</div>
        <div>Comes to</div>
        <div>Dine with us</div>
        <div>Every day</div>
    </div>
</div>

让它包装数据以便我有很多列

A very         Dine with us
Big chicken    Every day
Comes to   

我想在整个东西下面添加一个标签，但是由于我将 div 宽度设置为某个值，居中它会显示它向左移动，因为它没有考虑整个 div 的大小，因为包装。

A very         Dine with us
Big chicken    Every day
Comes to   

   LABEL

我怎样才能实现我想要的，即:

A very         Dine with us
Big chicken    Every day
Comes to   

            LABEL

Answer 1

这里你想要的是一张 table 。然后是一个包含标签的 div 和一些 CSS，这样您就可以控制它的位置。这是 codepen 上的一个工作示例 https://codepen.io/anon/pen/WPmOWR

<div style="flex: 1; width: 280px; height: 100%;">
 <table style="width:100%">
    <tr>
      <th>A Very</th>
      <th>Dine With us</th> 
    </tr>
    <tr>
      <td>Big Chicken</td>
      <td>Every Day</td> 
    </tr>
  <tr>
<td>Comes to</td>  
</tr>
</table>
    <div class="label"> LABEL</div>
</div>

CSS

.label{
     width: 100%;
     margin: 0 auto;
     text-align: center;
     background: red;
     }