我试图在模态窗口中将一些文本居中,但我无法使文本居中。
我的 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
编辑:我将其中一个文本对齐更改为居中,我正在测试一些东西并在我改回去之前复制了代码
最佳答案
将 display: block
添加到您的 a
元素。默认情况下,a
元素是 inline
并且 inline
元素的宽度取决于 text-align
所在的内容'除非你把它放在他们的容器里,否则不会有效果。
.address{
font-size:1.5em;
text-align: center;
display: block;
}
关于javascript - html/CSS 文本对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32074475/