我想把文字放在中心。垂直它的中間，但水平不是。我錯過了什麼？這裏是FIDDLEHTML：把文字放在中心

<div style="display: table; height: 600px; overflow: hidden;text-align: center"> 

    <div style="display: table-cell; vertical-align: middle; 
           text-align: center;" class="dlgImg">this is text</div> 

</div>

來源

2014-03-07 manish

CSS的使用margin屬性來執行此操作。 –

給予寬度：100％到外部div – PravinS

設置寬度100％給兩個div將解決您的問題。看看我的答案來獲得解決方案。 – SpiderCode

使用本

<div style="display: table; height: 600px; overflow: hidden;text-align: center;width:100%"> 
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div> 
</div>

JSFIDDLE

來源

2014-03-07 06:52:49 PravinS

 <div style="display: table; height: 600px; overflow: hidden;text-align: center;margin:auto"> 
      <div style="display: table-cell; vertical-align: middle;text-align: center;margin:auto" class="dlgImg">this is text</div> 
     </div>

來源

2014-03-07 06:50:50

的問題是，你都應該申報單是100％的寬度。使它達到100％，它會解決你的問題。

Live Demo

添加Width:100%將解決你的問題，如下圖所示：

<div style="display: table;width:100%; height: 600px; overflow: hidden;text-align: center"> 

    <div style="display: table-cell;width:100%; vertical-align: middle; 
           text-align: center;" class="dlgImg">this is text</div> 

</div>

來源

2014-03-07 06:51:01 SpiderCode

你缺少width的股利。將寬度添加到一個或兩個div後，一切都會好起來的。

來源

2014-03-07 06:51:07

新增width:100%;到第一個div

<div style="display: table; height: 600px; overflow: hidden;text-align: center; width:100%;"> 
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div> 
</div>

Demo Fiddle

來源

2014-03-07 06:53:07 Rex

您的垂直對齊功能，因爲ÿ你已經設置了table的height。

style="display: table; height: 600px;。

，如果你對錶提供width

style="display:table;height:600px;width:100%;"

來源

2014-03-07 06:56:19 Lekhnath

給予寬度你的水平對齊方式將功能：100％或你有多麼的寬度要第一個div

<div style="display: table; width:100%;height: 600px; overflow: hidden;text-align: center"> 

    <div style="display: table-cell; vertical-align: middle; 
           text-align: center;" class="dlgImg">this is text</div> 

</div>

來源

2014-03-07 06:56:43 Sarath

，如果你發現你有div裏面的div

你的設置是這樣的：

<div class="imgContainer"> 
    <div> 
    <div> 
      /* text here */ 
    </div> 
    </div> 
</div>

你給準確的寬度在div.imgContainerwidth:800px;和下一個孩子inline風格div width:600px;，但你不給寬度div在文本的歸屬。

嘗試此解決方案希望這幫助

.imgContainer div{ 
    width:100%; 
}

DEMO

來源

2014-03-07 07:07:20 jhunlio

HTML：把文字放在中心

回答

Demo Fiddle

相關問題