Html 为什么我不能在相邻的div中正确地将文本居中

我试图在两个相邻的

div

中居中显示文本，但我无法理解我做错了什么

基本上，我有两个

div

，每个div占窗口的50%。第一个div包含一个图像（我成功地将其居中），我正在尝试将文本居中于第二个div中。下面是我的示例，我使用以下css：

.thumbnail-descr{
    text-align: center;
    min-height: 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
}

---

没有必要使用原始的DOM结构或CSS（最重要的是有两个

div

占据整个宽度，其中一个有一个居中的图像，另一个有一个文本。我如何实现它？

在继续给出解决方案之前，你可以用更少的代码得到完全相同的结果，用如此少的内容给出如此多的类只能产生巨大的代码

您为文本align:center指定的span类不会填充父级的整个宽度，因此，由于文本的宽度等于文本，它将在何处居中

---

您可以将“text align:center”放在span的父类square类中，但我通常会使用不同的方法。

不确定是否需要span。

---

如果删除span标记并对div样式使用相同的css，或者简单地将span类名添加到一个div类名中，那么您的div类名工作得非常好。

我认为出现问题的原因是description div中的宽度 试试这个建议：

使用div扭曲，div将使用缩略图descr类

<div class='square'>
        <div class="thumbnail-descr"><span>Descr</span><div>
    </div>

---

希望这有助于

我从示例中了解到，您希望垂直居中“Descr”。有几个技巧可以做到这一点：

• 调整填充并使用框大小边框框可以更好地控制高度
• 使用flexbox（目前尚未广泛提供）：
• 如果您事先知道只有一行文本，则可以使用

  行高

• （另一个选项请参见更新）

例如，请参见：

但要考虑以下几点：

• 这仅在有一行文本时有效，因为在文本换行时，它将被打断
• 这不是正常使用的线条高度，它利用了一个副作用：文本垂直居中于线条高度
• 一些CSS框架（即Bootstrap）使用此技巧将文本集中在某些组件上

更新

我忘了另一个选项，因为一个div在另一个div中，所以可以在父对象上使用

位置：相对
，并使用
顶部：50%
和负顶部边距为子对象使用绝对位置。您需要将顶部边距设置为子对象高度的一半（这就是模态通常居中的方式）：

看

您还问了为什么您的解决方案不起作用……这有助于理解原因：
不，它不能完美地工作。发生的情况如下：。我假设这可以用更少的代码来完成，因此我在最后一句中告诉了这一点。由于我缺乏知识，这是我提出的第一种方法，因此如果您更了解approach-你能分享一下吗？谢谢你调查这个问题。实际上它没有达到我希望的效果。应用你的更改后，问题似乎是文本没有居中，不是吗？你可以删除背景色，我使用背景色来调试类缩略图的大小descrsize=width，很抱歉混淆在上面的注释中，“调试宽度…”示例中居中文本没有问题。问题是第二个div与第一个div不在同一级别上。（它比第一个小得多）@萨尔瓦多请检查我的小提琴，它已经更新。你知道如何水平居中文本吗？如果你使用
位置：绝对
技巧…将
宽度：100%
添加到
。缩略图描述
和
文本对齐：居中
.thumbnail-descr{
    text-align: center;
    min-height: 10px;
    background-color:red;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
    width:100%;
}

.square{
  width: 45%;
  height: 200px;
  border: 3px dotted #ddd;
  display:inline-block;
  margin: 0 10px 0 10px;
  line-height: 200px;
}

.square { position: relative; /*..*/ }
.thumbnail-descr{
  position: absolute;
  top: 50%;
  margin-top: -10px;
  /*...*/
}