1

私は2つのdivを持っています。1つは左側に、もう1つは右側にあります。左側の説明が画像（180px）より長い場合、画像は上部に留まります。または、その逆の場合、テキストが画像よりも短い場合は、上部に配置されるテキストよりも短くなります。

両方を常に中央に揃えてほしい。

display:table-cells必要なのはそれからだと思いますvertical-align:middleが、これまでのところ、これを機能させることができませんでした。

  <div class="span4">
   <img class="thumbnail" src="http://placehold.it/290x180" width="290" height="180" alt="Second function" />
  </div>
  <div class="span6 offset1">
    <h3>Element</h3>
    <p>Description.</p>
  </div>
4

1 に答える 1

0

これを見始めました: 別の div 内で div を垂直方向にセンタリングする

そこで言及されているスタイル要素のいくつかを取り、ここに適用しました: http://jsfiddle.net/kgJ2M/3/

個別の div に高さの値を配置すると、説明がちょうど収まるボックスの中央に配置されるのではなく、中央に配置されるようになりました。

この問題に手遅れではないことを願っています。よくある質問のようです。

.span4 {
  float:left;
}
.span6{
  height:180px;
  width:100px;
  vertical-align:middle;
  display:table-cell;
  border:1px solid blue;
}
.containerspan {
  border:1px solid green;
  height:200px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
于 2013-01-17T21:07:19.930 に答える