将a标签转换为块级元素后无法居中

我在nav中使用了text-align: center和margin: 0 auto都没有用具体代码是这样的

html：

css：

然后效果就成这样了：

想问一下如何解决。。卡了一晚上了。

波克隆斯卡娅 2017-03-24

源自：HTML5展望 3-2 作业题

收起

3回答

静静静静Y 2017-03-28 18:30:14

a标签同一行显示并不是非要用浮动，设置diaplay: inline-block，a标签就会在同一行显示

收起回答

魂魄之子 2017-03-24 10:52:45

、

<!--    portfolio -->
    <section class="port">
        <div class="port-text">
            <h1>Portfolio</h1>
            <p>lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut </p>
            <p>labore etdolore magna aliqua.Ut enim ad minim veniam</p>
        <nav>
            <a href="#">All</a>
            <a href="#">WEB</a>
            <a href="#">SOFTWARE</a>
            <a href="#">WORKS</a>
            <a href="#">BRANDS</a>
        </nav>
        </div>
        <img src="img/portfolio-nav-img.jpg">
    </section>

/*portfolio*/
.port{
    height: 910px;
}
.port-text{
    height: 350px;
    position: relative;
}
.port-text > h1{
    padding: 70px 0 40px 0;
    color: #f46028;
}
.port-text > nav{
    position: absolute;
    left: 35%;
    margin: 40px 0 20px 0;
    padding: 40px 0 0px 0;
}
.port-text > nav >a{
    height: 20px;
    padding: 10px 15px;
    margin-left: 40px;
    line-height: 20px;
    text-align: center;
    border: 2px solid #f46028;
    color: #f46028;
}