Question

我有一个链接，我尝试使用text-align:center和display:inline-block进行居中，但似乎略微偏离中心。我在下面列出了图片和我的代码。任何帮助都会很棒，谢谢！给我带来麻烦的是“按钮”类

HTML：

    <div class="headerContent">

        <nav>

            <ul class="navDown">  
                <li><a href="#">Intro</a></li>  
                <li><a href="#windSection">Wind</a></li>  
                <li><a href="#solarSection">Solar</a></li>  
                <li><a href="#nuclearSection">Nuclear</a></li>  
                <li><a href="#endSection">End</a></li>     
            </ul>

            <a href="#" class="menu-icon"><p class="menu"></p></a>

        </nav>

        <a href="#" class="scrollup">Scroll</a>
        <a href="#windSection" class="scrolldown">Scroll</a>

        <h1 class="title bigTitle">Going Green.</h1>

        <p class="headerText">
            A change is coming- and that change will be making the switch to green forms of energy.  If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change.  <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
        </p>

        <p class= "noElechouse"></p>

        <div class="select">

            <a class="button" href="links/calculator.html">Find Now</a>

        </div>

    </div>

CSS：

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
    padding-top:15px;
}

.headerText {
    position:absolute;
    bottom:35%;
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
    display:block;
    left:0;
    right:0;
}

.select {
    text-align:center;
}

.button {
    position:absolute;
    display:inline-block;
    font-family: 'Oxygen', sans-serif;
    font-weight:normal;
    font-size:30px;
    color:white;
    bottom:10px;
    text-decoration:none;
    padding: 10px 20px;
}

Answer 1

使用

时我可以完全居中

nav ul{
    padding: 0;
}

Answer 2

display: inline-block为元素添加了额外的空白区域。对此有一些修复（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。我建议您选择“将父级字体大小设置为0”选项，因为您没有多个项目彼此相邻，并且您已经设置了font-size .button。

.select {
    font-size: 0;
}

您还position: absolute设置了.button。删除它。如果你确实需要它绝对定位，我建议定位包含div。

这是 Demo

或者你可以从.button删除display: inline-block。

Answer 3

你的主要问题是使用inline-block，实际上左边增加了大约4px的空间。要删除此项，请将-4px添加到元素的边距，或者如brouxhaha建议的那样，您可以将父级的font-size设置为零，然后将其重置为{{1元素。

如果您想了解有关内联阻止问题的更多信息，请查看我几个月前回答的问题：CSS Inline-block Dimension Discrepancies

<a> horitzontal align slightly off center</a>

3 个答案: