在旋轉的div下方對齊文本

Question

我需要在旋轉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/

希望有人可以幫助我

Answer 1

嘗試從標記<div>內部分離出<p>標簽：

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-group和clear:right來防止文本在瀏覽器調整大小時移動。 如果將瀏覽器的大小調整為較小的寬度，則這將需要其他改進。 JSFiddle已更新以反映更改