为什么我的文本中心不在这里？

Question

我有以下CSS：

.me-header {
    display: inline-block;
    position: relative;
    top: 50px;
    left: 10px;
}

    .me-header a {
        color: #333;
        font: 10px "Lucida Grande", Helvetica, sans-serif;
        text-decoration: none
    }

.resume-header {
    display: inline-block;
    position: relative;
    top: 50px;
    left: 100px;

}

    .resume-header a {
        color: #333;
        font: 10px "Lucida Grande", Helvetica, sans-serif;
        text-align: center;
        text-decoration: none
    }

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

以及以下HTML：

<div class="me-header">
                <a href="#"><img src="media/me-icon.png" alt="Picture of Christian Selig"><br> <span class="center-text">Contact Me</span></a>
            </div>
            <div class="resume-header">
                <a href="resume.pdf"><img src="media/resume-icon.png" alt="Resume icon" title="Click to download resume (PDF)"><br> <span class="center-text">Resume (PDF)</span></a>
            </div>

但是我的文字仍然左对齐。 为什么？

Answer 1

a和span都是内联元素-因此它们的宽度仅与其内容相同。 因此，当您将文本居中时，它将在inline元素内居中，但是inline元素显示在左侧。

如果设置text-align: center; 在父块元素上它将起作用。

如果要使整个块居中，请使用自动边距。

Answer 2

你可以做

.center-text
{
    display: table;
    margin: 0 auto;
}