对齐旋转div下方的文本

时间:2013-07-30 18:57:09

标签: css html alignment center

我需要一些帮助,将文本居中放在旋转的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/

希望有人可以帮助我

1 个答案:

答案 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;
}

JSFIDDLE

修改

添加了.marker-groupclear:right,以防止文字移动浏览器重新调整大小。如果将浏览器调整为较小的宽度,则需要进一步改进。 JSFiddle已更新以反映更改