1

カルーセル上の画像の Web ページを開発しています。DIV 内で画像を下に移動したり、垂直方向の中央に配置したりするにはどうすればよいですか?

ここに私のCSSコードがあります:

.carousel .item {
  height: 900px;
  background-color: #777;
}
.carousel-inner > .item > img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

問題のウェブページの URL は、画像が高すぎることを示しています: http://www.canninginc.co.nz/canluciddream/screenshots.html

編集

OK、次を変更してコードを編集しました。

margin-top: 50px;

私はまだ画像がdivの下になるようにしています。上余白を増やすことはできますが、これでは背景が白くなります。画像を少し下に移動するにはどうすればよいでしょうか?

4

5 に答える 5

1

画像の上余白を130pxにするとカッコいいです！

margin-top: 130px;
于 2013-09-13T04:49:10.550 に答える
0

本体内に画像を配置し、本体を position: relative に設定してから、画像を position: absolute; に設定します。上: 0; 左: 0;

本文内に画像を入れられない場合は、本文にマイナスマージントップを追加してください。

于 2013-09-13T04:48:43.153 に答える
0

あなたの問題は、画像が高すぎることではなく、ヘッダーが固定されていることです。margin-top:50pxの代わりに -80px を設定し.myCarouselます。

于 2013-09-13T04:49:18.640 に答える
0

画像が上部のナビゲーション バーの背後にある理由は、ナビゲーション バーの位置が固定に設定されているためです。これにより、スタイリングの目的でページの残りの部分から削除されます。他の div/要素は、配置時にそれを認識しません。位置を削除した場合: 固定; その項目に css を追加すると、他の要素はその項目に対して相対的に配置されます。もう 1 つのオプションは、画像要素に十分な上部マージンを追加して、デフォルトで上部バーの下に押し下げることです。

于 2013-09-13T04:50:13.673 に答える
0

まず、.item の位置を相対的に設定してから、css で次のようにします。

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
}

これにより、画像が垂直方向に中央揃えになります

于 2013-09-13T05:14:27.570 に答える