如何在CSS中使用边框时将文本置于框的中心？

Question

我有下面的代码：

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
    max-width: 60rem; 
 
    /* 960 */ 
 
    margin: 0 auto; 
 
} 
 
.item { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    margin-bottom: 5rem; 
 
    /* 80 */ 
 
} 
 
.item__img, 
 
.item__info { 
 
    width: 50%; 
 
    float: right; 
 
} 
 
.item__img {} .item__img .img-map { 
 
    width: 95%; 
 
    height: 18.750rem; 
 
    /* 300 */ 
 
} 
 
.item__img img { 
 
    width: 95%; 
 
    height: 18.750rem; 
 
    /* 300 */ 
 
}

<div class="container" role="main"> 
 

 
    <article class="item"> 
 

 
    <div class="item__info"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum 
 
     vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris 
 
     rutrum ornare.</p> 
 
    </div> 
 
    <div class="item__img"> 
 
     <div class="img-map"> 
 
     <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" /> 
 
     </div> 
 
    </div> 
 

 
    </article> 
 
</div>

遗憾的不良作风，我刚开始学CSS ...

现在看到的是，在后浏览器，我看到一只狗的照片，旁边有一些文字。我希望这个文本在中心（垂直）对齐。基本上，目前它看起来像this，我想设置它像this。我应该如何修改我的CSS代码以显示它，因为它是？谢谢！

编辑我的另一个问题是 - 为什么文本没有排在顶层到图片的顶层？我在我的css代码中看不到任何约束，有人知道它是如何工作的吗？

Answer 1

我的建议是忽略任何暗示使用display：flex的人，因为它是doesn't have the browser support it needs for public domain。 （目前为14/04/15）随着时间的推移，这将会变得更好，并且在Windows 10今年晚些时候推出后，这可能会是一个更严重的考虑因素）

你想要的可以用display:table;父母和display:table-cell;对孩子。在下面的代码中，我重新排列了HTML，因此图像首先被删除，并且删除了float:right;（我的经历让我不再使用float，因为它引起了很多可以避免的头痛，但这是一个更大的讨论）。

将vertical-align:middle;添加到孩子们将使他们垂直对齐他们的“细胞”。

之前您在文本上方看到空格的原因是每个浏览器都有一个应用的默认样式表。例如Firefox拥有这样的：

p, dl, multicol { 
    display: block; 
    margin: 1em 0; 
} 

为了帮助您这样的事情，我建议使用Mozilla Firefox的了解和下载Firebug插件。

下面是完整的代码：

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
    max-width: 60rem; 
 
    /* 960 */ 
 
    margin: 0 auto; 
 
} 
 
.item { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    margin-bottom: 5rem; 
 
    display:table; 
 
    /* 80 */ 
 
} 
 
.item__img, 
 
.item__info { 
 
    width: 50%; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 
.item__img {} .item__img .img-map { 
 
    width: 95%; 
 
    height: 18.750rem; 
 
    /* 300 */ 
 
} 
 
.item__img img { 
 
    width: 95%; 
 
    height: 18.750rem; 
 
    /* 300 */ 
 
}

<div class="container" role="main"> 
 

 
    <article class="item"> 
 

 
    <div class="item__img"> 
 
     <div class="img-map"> 
 
     <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="item__info"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum 
 
     vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris 
 
     rutrum ornare.</p> 
 
    </div> 
 

 
    </article> 
 
</div>

Answer 2

此链接可以帮助你，我用这一招很多时候，当涉及到垂直对齐：

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

添加以下代码：

position: relative; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 

到容器旁的文字（在你的情况下'p'），并确保设置包装图像和文本的容器（article.item）的高度。

Answer 3

你想要设置div和line-height的高度。 像：

.div{ height: 100px; 
     line-height: 100px;} 

在这里看到一个例子：http://jsfiddle.net/BRxKX/

Answer 4

使用Flexbox的，如果可以的话，它可以让你做到这一点没有任何奇怪的规则或黑客。

例如：

HTML

<div class="container"> 
    <div class="image">200 x 200</div> 
    <p>Lots of text here...</p> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

.container { 
    display: flex; 
    align-items: center; 
} 

.image { 
    height: 200px; 
    width: 200px; 
    min-width: 200px; 
} 

See it here in action。尝试编辑p标签中的文字，看看它是如何工作的。