3

CSS アニメーション HTML ブロックに取り組んでいます。完全に責任のあるグリッドを作成したため、これらのブロックには相対的なサイズがあります。ブロックには、すべての画面にコンテンツを正しく表示するための大きな画像が含まれています。ブロック内の画像は、コンテンツに合わせて100% の幅を持ち、CSS トランジションとトランスフォームも備えています。

これらの画像を垂直方向に中央揃えにしたいのですが、純粋な CSS のみを使用しています。display、positionおよびプロパティの多くのバリエーションを試しましたvertical-alignが、誰もうまくいきませんでした。プロパティを使用して適切なアニメーションを簡単に実現できましbackgroundたが、すべての画像に対して大量の css クラスを作成したくありません (js や jquery を使用しても)。

純粋な CSSでこの問題を解決する方法を教えてください。問題を示すためにjsfiddleも作成しました。

編集:ブロック内の画像の比率も維持したいと思います。

4

5 に答える 5

2

水平方向と垂直方向の中央に位置するコードペンの例を作成しました。サイズを変更しても中央に留まります。

http://codepen.io/tom-maton/pen/oqsEJ

私が持っている例では

margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;

これにより、これを行うと、h & v が中央に配置されます

margin: auto 0;
position: absolute;
top: 0;
bottom: 0;

これはちょうど垂直に配置されます

お役に立てれば

于 2013-09-15T08:40:12.850 に答える
0

私は周りを見回して、あなたのためにこのリンクを見つけました：

CSS トリック - 絶対中心 (垂直と水平) と画像

これがあなたの助けになることを願っています

私もあなたのフィドルでそれをやった：

あなたのフィドルリンク

私は単に追加しましたmargin-top: -100px;

編集

申し訳ありませんが、固定サイズではないことに気づきませんでした。この更新されたバージョンを参照してください。

フィドル更新

次のコードを使用しました。

position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;

ここで見つけました：

CSSで縦方向にセンタリングする6つの方法

于 2013-09-15T08:25:13.323 に答える
0

(私の意見では) 最も動的な解決策は、translateY を使用することです。これにより、要素が現在の位置から移動します: 参照: CSS3 2D 変換

img {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
于 2016-02-25T14:37:22.173 に答える
0

画像の比率とコンテナー DIV の両方を画像サイズよりも小さく保持することはできません。DIVheight:100%内の画像に合わせて設定するか、DIV をより大きなサイズに設定することもできます (または、小さい画像を使用して DIV に収まるようにすることもできます)。 ) と使用line-height:100%

最初のソリューションのデモは次のとおりです。

比率を変更するデモ

2番目のソリューションのデモ：

比率を変更しないデモtext-align:center( を使用しない場合でも中央に配置されるよう に も設定しますwidth:100%)

お役に立てば幸いです。

于 2013-09-15T08:31:30.807 に答える