时间戳

首页 > 解决方案 > 如何将位于包装 div 内的标签居中？

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

问题描述

我有一个包含列数据的长 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

标签： htmlcssflexbox

解决方案

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

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

.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 class="wrapper">
  <div class="container">
    <div>A very</div>
    <div>Big chicken</div>
    <div>Comes to</div>
    <div>Dine with us</div>
    <div>Every day</div>
  </div>
  <div class="container-label">
    <h1>my label</h1>
  </div>
</div>

推荐阅读