如何在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標籤中的文字，看看它是如何工作的。