javascript - 设置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>