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

您想要的是一张桌子。然后是一个带有标签的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;
     }

Answer 2

为了使标签文本相对居中，您需要将其放置在一个容器中，该容器的宽度应与其中包含数据的容器的宽度相同。

我修改了您的代码，而没有完全改变您的思路。

./gradlew app:dependencies

.wrapper {
  width: auto;
  margin: 0 auto;
}

.container {
  background-color: #edc3c3;
  width: 400px;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.container div {
  width: auto;
}

.container-label {
  background-color: #e1edc3;
  text-align: center;
}

.container-label h1 {
  display: block;
}

如何将位于包装好的div内的标签居中？

2 个答案: