在旋转的 div 下方对齐文本答案

【问题标题】：Align text below rotated div在旋转的 div 下方对齐文本
【发布时间】：2013-07-31 03:27:00
【问题描述】：

我需要一些帮助来将文本置于旋转的 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/

希望有人能帮帮我

【问题讨论】：

标签： css html alignment center

【解决方案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 已更新以反映更改

【讨论】：

谢谢，但是......现在“文本行”就在调整窗口大小的 div 下方。但是文本应该始终“固定”它。
@Dennis 进行了一些更改以解决该问题
啊，我只是发现另一个问题...较长的文本不会在中心。有什么解决办法吗？
@Dennis 你能举个例子吗？你想把它放在一条线上吗？ jsfiddle
@peter 就像在这个例子中：jsfiddle.net/GVsxF/8 我怎样才能把它放在中间？