html - なぜ私のテキストセンターはここにないのですか？

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;
}