css - 根据底部边缘的中间放置文本块

Question

div我在我的页面上的包装器内的任意绝对位置放置了一些文本。最自然的放置是指定我要放置的文本元素框的底部边缘中间的left和值。top我目前的解决方案似乎很复杂，有 3 个嵌套div的 s。有没有更简单的方法？

<div class="wrapper">
  <div class="a">
    <div class="b">
      <div class="c">TEXT123<br/>TEXT123123</div>
    </div>
  </div>
  <div class="a">↖&lt;/div> <!--for illustration only-->
</div>

和

.wrapper {width:300px; height:200px; background-color:yellow;}
.a {position:absolute; left:200px; top:100px;}
.b {position:absolute; bottom:0;}
.c {position:relative; left:-50%; border:solid 1px;}

见：http: //jsfiddle.net/TTc23/

Answer 1

看看这是否适合你：

HTML：

<div class="wrapper">
      <div class="c">TEXT123<br/>TEXT123123</div>
</div>

CSS：

.wrapper {width:300px;height:200px;background-color:yellow;display:table-cell; vertical-align:middle; text-align:center}
.c {border:solid 1px;margin:auto; width:100px}

http://jsfiddle.net/zHEXQ/

• 我已将以下附加 CSS 属性添加到“包装器”div

  显示：表格单元格；垂直对齐：中间；文本对齐：居中

• 将 "c" div 的 css 更改为：

  .c {border:solid 1px;margin:auto; 宽度：100px}

• 删除了 div "a" & "b"