在div中垂直居中的文本

我試圖顯示「我是iOS工程師&來自英國倫敦的Web開發人員」，其中div的ID爲'london'。但是，我正在努力找到一個好辦法。水平對齊很容易，因爲我只需設置「倫敦」div的text-align屬性。但是，嘗試垂直對齊時，我無法設置width和height屬性，這意味着我不能使用margin: 0 auto;來垂直對齊文本，因爲我使用的是span元素。在div中垂直居中的文本

請你能告訴我最好的方法來實現這個嗎？

這是一個JSFiddle與我目前有的：http://jsfiddle.net/5aX7p/。

來源

2013-02-15 max_

你可以做類似如下的事情：

HTML：

<div class="outer"> 
    <span class="inner">This is vertically centered.</span> 
</div>

CSS：

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

我改變你的提琴在這裏：

http://jsfiddle.net/5aX7p/5/

注意，使用CSS表是更好的（恕我直言），比改變行高或填充或保證金或什麼，因爲它總是垂直居中的內部跨度，即使它包裝成多行。使用其他解決方案時，如果內容大小發生變化，則必須調整行高或填充或邊距的值。

來源

2013-02-15 23:21:35

它實際上應該是'vertical-align：middle'，而不是'vertical-align：center'。 ;） – animuson 2013-02-15 23:27:43

哎呀，謝謝！編輯考慮到這一點。我有小提琴的權利，這算不算？ :) – 2013-02-15 23:28:57

如果您的#london部門始終是200px高，那麼您可以將height: 200px更改爲line-height: 200px，並且它會將行中的文本垂直居中。

在這裏看到：http://jsfiddle.net/5BDcr/

來源

2013-02-15 23:20:43 animuson

是的，完美的，非常感謝好友。 – 2013-02-15 23:22:01

下面是居中對齊版本（從您的提琴拍攝）：

<div id="london"> 
      <span class="light" style="display: inline-block; vertical-align: middle; line-height: 1.2;">I’m an 
       <span class="heavy">iOS Engineer &amp; Web Developer</span> 
       <span class="light"> from London, UK</span> 
      </span> 
</div>

與此添加到CSS的#london：

line-height: 200px;

來源

2013-02-15 23:20:57

在div中垂直居中的文本

回答

相關問題