Question

我的页脚有下一个代码：

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中心文本agaisnt ul。如果我在h5中使用text-align，它只适用于第一个ul（假设文本的长度）。

先谢谢。

Answer 1

从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

Answer 2

也许两个孩子都有中心文字？

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

如何用ul中心h5

2 个答案: