基於其底邊的中間放置文本塊

我在我的頁面上放置了一些文本在包裝中的任意絕對位置 - 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">↖</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;}

enter image description here

參見：http://jsfiddle.net/TTc23/

來源

2013-08-29 Frank Seifert

看看這對你的作品：

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

顯示：表細胞;垂直對齊：中部;文本對齊：中心
改變CSS爲「C」的div：

.C {邊界：1px的固體;保證金：汽車;寬度：100像素}
刪除div的「一」 &「B」

來源

2013-08-29 10:37:50

因爲其他元素依賴於它，請不要改變包裝股利。另外，如何使用您的解決方案指定框的位置（'left：200px; top：100px;'）？ –

我認爲問題是圍繞包含文本的div。如果不是這樣，那麼，對不起，我的解決方案可能不是那個。您可以移除邊距：自動並指定邊距頂部和邊距左邊的值以實現您所需的放置。 –

基於其底邊的中間放置文本塊

回答

相關問題