基于文本块底边的中间放置文本块

Question

我在页面上的包装器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/

• 我在“wrapper”div

  中添加了以下额外的css属性

  显示：表细胞;垂直对齐：中部;文本对齐：中心

• 将“c”div的css更改为：

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

• 删除了div“a”＆amp; “B”