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

Question

so, when I assign a height to either the grid-cart-message or the messages-cart-view sections the inner span text does not center accordingly. It is cut off within the div. Any possible way to overcome this? Thx.

  .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

try this

since you added margin you faced that problem

 .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

Also text-centering try this:

 .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>