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都是内联元素 - 因此它们只与其内容一样宽。因此，当您将文本居中时，它在内联元素中居中，但内联元素显示在左侧。

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

如果您想使整个区域居中，请使用自动边距。

Answer 2

你可以做到

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

为什么我的文字不在这里？

2 个答案: