设置div高度;内跨文本居中

Question

因此，当我为grid-cart-message或messages-cart-view部分指定高度时，内部跨度文本不会相应地居中。它在div中被截断。任何可能的方法来克服这个？ 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

试试这个

，因为您添加了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>