1

ダイナミックなスライド ショーを作成しています。

ボックス内の中央および垂直方向に整列するために動的に割り当てるテキストを取得しようとしています。

これまでのところ、私は持っています：

HTML

  <body>
  <div class="slide">
    <span class="content">
       <b>Hello. This text needs to be:</b><br><br> 
       - left-aligned but <br>
       - centered in the grey box<br> 
       - even if it changes<br>
       - the center of the white box <br> 
         should equal center of grey one.
    </span>
  </div>  
  </body>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px
}

.content {
  position: absolute;
  top: 30%;
  left: 15%;
  background-color: #fff;
}

出力

出力

テキストが変更された場合、テキストが中心ではなくなるため、これは機能しません。これを修正する方法はありますか？

http://jsbin.com/uyiFiwI/23/edit

4

3 に答える 3

3

display: table-cellこれはあなたが望むことをしますが、古いブラウザでサポートされていないものに依存しています.

.slide {
  position:relative;
  background-color: #ddd;
  display: table-cell;
  width: 300px;
  height: 300px;
  text-align: center; 
  vertical-align: middle;
}

.content {
  background-color: #fff;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

HTML を変更しない古いブラウザー用のソリューションはないと思います。

編集:固定の高さは必要ありません.content

EDIT：border: 1px solid grayデバッグのために削除されました。

編集：@Shomzの提案に従って変更されました（.content幅の新しい異なる基準を使用）。

于 2013-08-18T06:14:26.540 に答える
1

マークアップを少し変更したい場合は、リストを使用すると、改行やスペースの問題を解決するのに役立ちます。

@David-SkyMesh が彼の回答で行ったようにこれを組み合わせるとdisplay: table-cell、もう少し管理しやすいリストが得られます。

HTML

  <div class="slide">
    <div class="content">
      <b>Hello. This text needs to be:</b>
      <ul>
        <li>left-aligned but</li>
        <li>centered in the grey box</li> 
        <li>even if it changes</li>
        <li>the center of the white box this this is really long text not the gray one should equal center of grey one.</li>
      </ul>
    </div>
  </div>

CSS

.slide {
  position:relative;
  background-color: #ddd;
  width: 300px;
  height: 300px;
  padding: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.content > ul > li:nth-child(1) {
  margin-top: 10px;
}

.content {
  display: block;
  margin: auto;
  background-color: #fff;
  text-align: left;
}

.content ul {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}

デモ - jsBin

于 2013-08-18T07:03:21.987 に答える