Question

我有以下HTML代码：

<section class="video">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">

                        <ul class="footer-nav">
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Business</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Business</a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </section>

并且包含我的CSS（在jsfiddle中）我得到的结果是文本与左边对齐...我怎样才能将所有内容都集中在一起，所以结果如下：

                  Contact  Press  Careers  Business  Careers  Bussiness

？感谢。

Answer 1

http://jsfiddle.net/tfLz08vd/2/

只需添加

ul {
text-align: center;
}

li {
display: inline-block;
}

祝你好运！ ;）

Answer 2

不久前添加的类似问题 How do I get my <.li> centered in my nav

你只需要像这样添加text-align：center到ul元素：

.footer-nav{
    text-align: center;
}

.footer-nav li {
    list-style: none;
    padding: 5px;
    display: inline-block;
}

Answer 3

你应该尝试用li {display：inline-block;}替换li {float：left;}并将其父元素设为ul {text-align：center;}

Answer 4

将其添加到ul css样式

中

section.video ul {
    margin-top: 30px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

请参阅jsFiddle http://jsfiddle.net/tfLz08vd/83/

我怎样才能将我的ul li列表放在css中心？

4 个答案: