0

我有以下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>

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

4

2 回答 2

4

两者a和span都是内联元素 - 因此它们的宽度仅与它们的内容一样宽。因此，当您将文本居中时，它在内联元素内居中，但内联元素出现在左侧。

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

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

于 2013-01-23T15:15:59.337 回答
0

你可以做

.center-text
{
    display: table;
    margin: 0 auto;
}
于 2013-01-23T15:17:48.393 回答