Question

我试图将文字放在两个相邻的divs中心，我无法理解我做错了什么。

基本上我有2 divs每个占据窗口的50％。第一个div包含一个图像（我成功居中），我试图将文本置于第二个div中。所以这是我的Fiddle，我正在使用以下css：

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

没有必要拥有原始的DOM结构或CSS（主要的是让2 divs获取所有宽度，一个拥有居中的图像，另一个拥有文本。我怎样才能实现它？ / p>

Answer 1

我从这个例子中理解的是你想要垂直居中＆＃34;描述＆＃34;。有几个技巧可以做到：

调整填充并使用框大小边框来更好地控制高度。
使用flexbox（仍未广泛提供）：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
如果您事先知道您只有一行文字，则可以使用line-height。
（请参阅其他选项的更新）

例如，请参阅此Fiddle：

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

但请考虑一些事项：

只有当你有一行文字时才会这样做，因为在文本换行中它会被破坏。
这不是行高的正常使用，它利用了副作用：文本垂直居中于行高。
这个技巧被一些CSS框架（即Bootstrap）用来将文本集中在一些组件上。

<强>更新

我忘记了另一个选项，因为你在另一个中有一个div，你可以在父级上使用position: relative，并使用top: 50%和负上边距为孩子使用绝对位置。您需要将上边距设置为子高度的一半。（那是模态通常如何居中）：

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

请参阅http://jsfiddle.net/diegof79/M4fKM/1/

你也问过为什么你的解决方案不起作用......这有助于理解原因：http://phrogz.net/css/vertical-align/index.html

Answer 2

在继续为您提供解决方案之前，您可以使用更少的代码获得完全相同的结果，为这么少的内容提供如此多的类只会导致巨大的代码。

你给text-align：center的span类没有填满父级的整个宽度，那么，因为它的宽度等于文本所以它会在哪里居中？

你可以将'text-align：center'放到span的父级，square类，但我会使用不同的方法。

Answer 3

不确定是否需要跨度。如果删除span标记并对div样式使用相同的css，或者只是将span类名称添加到div类名称 - 就可以完美地运行。

Answer 4

我认为问题的发生是因为描述div中的宽度试试这个建议：

使用div进行扭曲，div将使用thumbnail-descr类

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

更新thumbnail-descr

.thumbnail-descr{
    text-align: center;
    min-height: 10px;
    background-color:red;
    vertical-align: middle;
    font-size: 26pt;
    color: #bbb;
    width:100%;
}

希望这个帮助

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

4 个答案: