css - 基于其底部边缘的中间放置文本 block

Question

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

<div class="wrapper">
  <div class="a">
    <div class="b">
      <div class="c">TEXT123<br/>TEXT123123</div>
    </div>
  </div>
  <div class="a">↖</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”