设置div高度； 内部跨度文本居中

Question

因此，当我为grid-cart-message或messages-cart-view部分分配高度时，内部跨度文本不会相应地居中。 它在div中被切断。 有什么办法可以克服这个问题？ 谢谢。

  .grid-cart-message { background: none repeat scroll 0 0 #05b1eb; overflow: hidden; } .grid-cart-message #messages-cart-view .error-msg span, .grid-cart-message #messages-cart-view .success-msg span { color: #fff; display: block; float: left; font-weight: bold; margin: 1em 0 1em 1em; text-shadow: 0 -0.1em #666; } .grid-cart-message #messages-cart-view { float: left; margin: 0 1%; width: 98%; } 

  <div class = "grid-cart-message"> <div class="grid-max"> <div id="messages-cart-view"> <ul class="messages"> <li class="success-msg"> <ul> <li> <span>Here is some text that is dynamically assigned.</span> </li> </ul> </li> </ul> </div> </div> </div> 

Answer 1

尝试这个

由于您增加了margin您遇到了这个问题

 .grid-cart-message { background: none repeat scroll 0 0 #05b1eb; overflow: hidden; } .grid-cart-message #messages-cart-view .error-msg span, .grid-cart-message #messages-cart-view .success-msg span { color: #fff; display: block; float: left; font-weight: bold; text-shadow: 0 -0.1em #666; } .grid-cart-message #messages-cart-view { float: left; margin: 0 1%; width: 98%; } 

  <div class = "grid-cart-message"> <div class="grid-max"> <div id="messages-cart-view"> <ul class="messages"> <li class="success-msg"> <ul> <li> <span>Here is some text that is dynamically assigned.</span> </li> </ul> </li> </ul> </div> </div> </div> 

Answer 2

同样以文本为中心，请尝试以下操作：

 .grid-cart-message { background: none repeat scroll 0 0 #05b1eb; overflow: hidden; } .grid-cart-message #messages-cart-view .error-msg span, .grid-cart-message #messages-cart-view .success-msg span { color: #fff; display: block; font-weight: bold; text-shadow: 0 -0.1em #666; } .grid-cart-message #messages-cart-view { float: left; margin: 0 1%; width: 98%; } .list { text-align: center; } 

  <div class = "grid-cart-message"> <div class="grid-max"> <div id="messages-cart-view"> <ul class="messages"> <li class="success-msg"> <ul> <li class="list"> <span>Here is some text that is dynamically assigned.</span> </li> </ul> </li> </ul> </div> </div> </div>