0

画像付きのカルーセルを実装しています。カルーセルは幅 960 ピクセルで、幅 960 ピクセル/5 = 192 ピクセル (および高さ 119 ピクセル) のコンテナーに 5 つの画像が含まれています。

画像の縦横比を変更せずに、コンテナ内で画像をできるだけ大きくしたい。また、画像をコンテナ内で水平方向と垂直方向の両方で中央に配置したいと考えています。

何時間にもわたってハッキングし、centerタグを使用することで、上で説明したものを構築することができました. ここでフィドルを参照してください。

問題は、2 番目のイメージのコンテナーにあります (黒い枠で示されています)。2 番目の画像は水平方向の中央に配置されていますが、コンテナーは少し下に移動しています。

画像にオーバーレイを実装しようとしていますが、コンテナをすべて同じ高さにする必要があります。コンテナをすべて同じ高さにするにはどうすればよいですか? centerタグを使用しない、より良い/よりクリーンなアプローチはありますか?

4

3 に答える 3

1

CSSに追加できvertical-align:top;ます#carousel-images .image{}

またはmiddleまたはbottom...

え？なぜ私はこれに反対票を投じたのですか?

http://jsfiddle.net/y2KV7/

于 2013-03-28T22:29:13.123 に答える
0

次のことを行うことで動作するようになりました。

HTML:

<div id="wrapper">
 <div id="carousel-images">
  <img src="http://eurosensus.org/img/initiatives-300/30kmh.png" />
  <img src="http://eurosensus.org/img/initiatives-300/affordableEnergy.png"/>
  <img src="http://eurosensus.org/img/initiatives-300/basicIncome.jpg"/>
  <img src="http://eurosensus.org/img/initiatives-300/ecocide.jpg"/>
  <img src="http://eurosensus.org/img/initiatives-300/educationTrust.jpg"/>
 </div>
</div>

CSS:

#wrapper 
{ 
 width: 100%; 
 text-align: center; 
 background: blue; 
}

#carousel-images 
{
 width: 960px;
 white-space: nowrap;
 font-size: 0;
 margin: 0 auto;
}

#carousel-images img 
{
 display: inline;
 max-width: 192px;
 max-height: 119px;
 border: 1px solid black;
 vertical-align: middle;
}

動作中の jsFiddle デモを表示するには、ここをクリックしてください

于 2013-03-28T22:41:07.443 に答える
-2

まず、世界を10年前に戻さないでください。書式設定にタグを使用しないでください。また、表示属性だけでなく、div と span の違いについても読んでおくことをお勧めします。http://www.w3schools.comで簡単に情報を見つけることができます。

センターコンテナをご希望の場合。css margin auto トリックを使用できます。

margin:5px auto; のように。コンテナを水平方向に中央揃えします。

于 2013-03-28T22:34:54.933 に答える