垂直居中某些文本

Question

您好我有一個形象在這裏

和文本被壓在頂部？

是否有一個屬性會使它在中心？

這是我試過的CSS。

text-align: center; 
margin: center; 

Answer 1

與display: table-cell和vertical-align:middle

#wrapper { 
 
    height: 200px; 
 
    background-color: #999; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div id='wrapper'> 
 
    <img src="" alt="img" /> 
 
    </div>

Answer 2

需要line-height這個包裹在一個div圖像。我加入了自己的形象以供參考太：

* {font-family: 'Segoe UI'; font-size: 10pt;} 
 
.tabs, .tabs li {margin: 0; padding: 0; list-style: none; display: block;} 
 
.tabs li {display: inline-block; background-color: #ccc; line-height: 50px; padding: 0 10px; border-top: 2px solid #999;} 
 

 
.theImg {background: url("http://i.stack.imgur.com/rld5h.png") center center no-repeat; line-height: 45px; width: 122px; text-align: center; margin: 20px; font-weight: bold;}

<ul class="tabs"> 
 
    <li>Tab 1</li> 
 
    <li>Tab 2</li> 
 
    <li>Tab 3</li> 
 
</ul> 
 

 
<!-- Using your code! --> 
 

 
<div class="theImg">Text</div>

Answer 3

設置line-height您元素的高度：

.tab { 
 
    background-image: url(http://i.stack.imgur.com/rld5h.png); 
 
    width: 122px; 
 
    height: 45px; 
 
    text-align: center; 
 
    line-height: 45px; 
 
    color: white; 
 
    }

<div class="tab">Text</div>

（我重用你圖中的例子，因此是文本的兩倍。）

Answer 4

你可以使用顯示的表是這樣的：http://jsfiddle.net/swm53ran/34/

<div class="outside"> 
    <div class="text">This is my text</div> 
</div> 

.outside { 
    display: table; 
    background-color:lightgray; 
    height:200px; 
} 

.text { 
    display: table-cell; 
    vertical-align: middle; 
}