0

ページ上のラッパー内の任意の絶対位置にテキストを配置divしています。最も自然な配置は、配置するテキストの要素ボックスの下端の中央のleftとの値を指定することです。top私の現在のソリューションは、3 つのネストされた s で複雑に見えdivます。もっと簡単な方法はありますか？

<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/

4

1 に答える 1

0

これがうまくいくかどうかを確認してください：

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」を削除

于 2013-08-29T10:37:50.763 に答える