javascript - html/CSS 文本对齐不起作用

Question

我试图在模态窗口中将一些文本居中，但我无法使文本居中。

我的 html 代码是:

<div ng-init="modalCompassDir()">
    <div class="myModal">
        <img class='floorImage' src={{items}}/>
        <div class="stickFigureDiv">
            <img class="stickFigure" style="height:30px; width:30px;" src="NavAppPics/stick_figure.gif"/>
            <img class="directionArrow" degrees='angle' rotate src='NavAppPics/transparentArrow.png' style="height:28px; width:25px;"  />
        </div>
    </div>

    <a class="address">{{address}}</a>

</div>

我的 CSS 代码是:

.myModal{
    position:relative;
    display: block;
/*    height:300px;*/
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: center;
/*    margin-left:10%;*/

}

我无法弄清楚为什么我的 CSS 中的文本对齐不起作用，因为我一直在关注这个例子:http://www.w3schools.com/cssref/pr_text_text-align.asp

编辑:我将其中一个文本对齐更改为居中，我正在测试一些东西并在我改回去之前复制了代码

Answer 1

将 display: block 添加到您的 a 元素。默认情况下，a 元素是 inline 并且 inline 元素的宽度取决于 text-align 所在的内容'除非你把它放在他们的容器里，否则不会有效果。

.address{
    font-size:1.5em;
    text-align: center;
    display: block;
}

Fiddle