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

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

set div height; inner span text centering

html

javascript

css

jquery

试试这个