0

回転した 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/

誰かが私を助けてくれることを願っています

4

1 に答える 1

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-groupとを追加しました。clear:rightブラウザのサイズをより小さな幅に変更する場合、これにはさらに改善が必要です。JSFiddle が更新され、変更が反映されました

于 2013-07-30T19:08:54.667 に答える