<a> 水平对齐稍微偏离中心答案

【问题标题】：<a> horitzontal align slightly off center<a> 水平对齐稍微偏离中心
【发布时间】：2025-04-16 19:45:01
【问题描述】：

我有一个链接，我尝试使用 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;
}

【问题讨论】：

你能在 jsfiddle.net 上发布一个孤立的样本吗？

标签： html centering css text-alignment

【解决方案1】：

使用时可以完全居中

nav ul{
    padding: 0;
}

【讨论】：

最简单的解决方案！

【解决方案2】：

您的主要问题是inline-block 的使用，它实际上在左侧增加了大约 4px 的空间。要删除它，请将-4px 添加到元素的边距，或者按照brouxhaha 的建议，您可以将父级的字体大小设置为零，然后将其重置为您想要的.button 元素的任何值。

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

【讨论】：

填充不会影响它，因为它在两边是相等的。
谢谢brouxhaha，没看到两边都有填充。我会尽快解决的。
出于某种原因，我不得不在居中之前添加 -100 的边距。知道为什么吗？
嗯...我需要看看你在说什么。你能告诉我你从哪里得到-100 吗？
不知道，我试过 -4px，它只是稍微移动了一点，所以我输入了 -100px，它神奇地居中了它自己

【解决方案3】：

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

.select {
    font-size: 0;
}

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

这是一个Demo

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

【讨论】：