如何中心H5與UL

我的頁腳中的下一個代碼：如何中心H5與UL

HTML：

<div class="container"> 
<div class="row"> 
     <div class="col-md-6"> 
      <div class="pull-right"> 
       <h5><u><i>Informacion</i></u></h5><br /> 
       <ul style="list-style-type: none;"> 
        <li><a href="#">Acerca de Nosotros</a></li> 
        <li><a href="#">Contactanos</a></li> 
        <li><a href="#">Ubicacion</a></li> 
        <li><a href="#">Trabaja con Nosotros</a></li> 
        <li><a href="#">Prensa</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="pull-right"> 
       <h5><u><i>Social</i></u></h5><br /> 
       <ul style="list-style-type: none;"> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br /> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="FB" /></a></li><br /> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="FB" /></a></li> 
       </ul> 
      </div> 
     </div>

隨着HTML進行測試的CSS樣式定義。問題來了，我無法實現h5中心文本攻擊。如果我在h5中使用文本對齊，它只適用於第一個ul（假設文本的長度）。

在此先感謝。

來源

2017-10-17 Elias MP

從UL刪除內嵌樣式style="list-style-type: none;"並添加引導類list-unstyled重置缺省UL風格即margin, padding，比把text-center類的父元素，使所有兒童中心。

<div class="container"> 
<div class="row"> 
     <div class="col-md-6 text-center"> 
      <div class="pull-right"> 
       <h5><u><i>Informacion</i></u></h5><br /> 
       <ul class="list-unstyled"> 
        <li><a href="#">Acerca de Nosotros</a></li> 
        <li><a href="#">Contactanos</a></li> 
        <li><a href="#">Ubicacion</a></li> 
        <li><a href="#">Trabaja con Nosotros</a></li> 
        <li><a href="#">Prensa</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-md-3 text-center"> 
      <div class="pull-right"> 
       <h5><u><i>Social</i></u></h5><br /> 
       <ul class="list-unstyled"> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/fb.jpg" alt="FB" /></a></li><br /> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/twitter.png" alt="FB" /></a></li><br /> 
        <li><a href="#"><img class="imgFooter" src="~/Content/img/Social/Linkedin.png" alt="FB" /></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div>

Demo

來源

2017-10-17 10:37:08

它的工作原理！謝謝:) –

我不能...兩分鐘多....：P –

也許在兩個孩子中心的文字？

.pull-right h5, 
.pull-right ul{ 
    text-align: center; 
}

來源

2017-10-17 10:36:17 pkolawa

最終樣式不期望的。每個李有不同的長度，他們不對齊。 –

如何中心H5與UL

回答

相關問題