[英]Align text below rotated div
i need some help with centering a text below a rotated div. 我需要在旋转div下方居中放置文本时需要一些帮助。
I can place the text on the div, but not below and in center. 我可以将文本放在div上,但不能放在下面和中间。
HTML: 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>
The whole code: http://jsfiddle.net/GVsxF/ 整个代码: http : //jsfiddle.net/GVsxF/
Hope someone can help me out 希望有人可以帮助我
Try separating out the <p>
tag from inside the marker <div>
: 尝试从标记<div>
内部分离出<p>
标签:
HTML: 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>
In your CSS, delete the .marker p
rule and add this: 在您的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;
}
EDIT 编辑
Added .marker-group
and clear:right
to prevent text from moving on browser re sizing. 添加了.marker-group
和clear:right
来防止文本在浏览器调整大小时移动。 This will need additional improvements if browser is re sized to smaller width. 如果将浏览器的大小调整为较小的宽度,则这将需要其他改进。 JSFiddle has been updated to reflect changes JSFiddle已更新以反映更改
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.