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中的text-align不起作用，因为我跟着这个例子：http://www.w3schools.com/cssref/pr_text_text-align.asp

编辑：我将其中一个text-align更改为center，我正在测试一些内容并在我更改之前复制代码

Answer 1

将display: block添加到您的a元素中。默认情况下，a元素inline和inline元素的宽度取决于text-align不会生效的内容，除非您将其设置在其容器中。

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

Fiddle

Answer 2

<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>
        <a class="address">{{address}}</a>
    </div>

将.address放入.myModal

Answer 3

将.address链接放在.myModal中，或者将一个类添加到父div，并在此类上使用text align center，如下所示：

<强> HTML

＆＃13;

<div ng-init="modalCompassDir()" class='custom_class'>
    <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>

＆＃13;

<强> CSS

＆＃13;

.myModal{
    position:relative;
    display: block;
/*    height:300px;*/
    width:100%;
    text-align:center;
}

.address{
    font-size:1.5em;
    text-align: right;
/*    margin-left:10%;*/
}
.custom_class{
  text-align:center;
}

＆＃13;

html / CSS text-align无效

3 个答案: