我需要一些帮助,将文本居中放在旋转的div下面。
我可以将文字放在div上,但不能放在下方和中间。
HTML:
<div id="contact_main2">
<div id="marker_align"
<div class="marker">
<p>Test</p>
</div>
<div class="marker">
</div>
<div class="marker">
</div>
</div>
</div>
整个代码: http://jsfiddle.net/GVsxF/
希望有人可以帮助我
答案 0 :(得分:0)
尝试从标记<p>
内部分离出<div>
标记:
HTML:
<div id="marker_align">
<!-- changed in EDIT -->
<div class="marker-group">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
</div>
在CSS中,删除.marker p
规则并添加:
.marker-label {
display: inline-block;
vertical-align: top;
width: 45px;
height: 45px;
margin: 0px 50px 0px 20px;
}
.marker-label p {
text-align: center;
}
/* added in EDIT */
.marker-group {
clear: right;
}
修改强>
添加了.marker-group
和clear:right
,以防止文字移动浏览器重新调整大小。如果将浏览器调整为较小的宽度,则需要进一步改进。 JSFiddle已更新以反映更改