4

確かに、CSS の垂直方向の配置に関する質問の山に追加したくはありませんが、解決策を見つけるのに何時間も費やしましたが、まだ役に立ちません。状況は次のとおりです。

画像のスライドショー ギャラリーを作成しています。ユーザーのウィンドウが許す限り画像を大きく表示したい。だから私はこの外側のプレースホルダーを持っています:

<section class="photo full">

(はい、HTML5 要素を使用しています)。次の CSS があります。

section.photo.full { 
    display:inline-block;
    width:100%; 
    height:100%; 
    position:absolute;
    overflow:hidden; 
    text-align:center;
}

次に、その中に画像を配置します。画像の向きに応じて、幅または高さのいずれかを 75% に設定し、もう一方の軸を自動に設定します。

$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>

そのため、流体の外側のコンテナがあり、内側に流体の画像があります。画像の水平方向の中央揃えは機能しますが、コンテナ内で画像を垂直方向に中央揃えする方法が見つからないようです。センタリング方法を調査しましたが、ほとんどの場合、コンテナーまたは画像の幅または高さが既知であると想定しています。それから display:table-cell メソッドがありますが、これも私にはうまくいかないようです。

私は立ち往生しています。CSS ソリューションを探していますが、js ソリューションも受け入れています。

4

3 に答える 3

8

これはうまくいきます：

section.photo.full {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
}

section.photo.full a {
  outline: 0;
  display: table-cell;
  vertical-align: middle;
}

section.photo.full img {
  margin-top: 0;
}

親コンテナがテーブルとして表示されなかったため、displaytable-cellは機能しなかったと思います。

これがjsfiddleのデモです：

http://jsfiddle.net/duopixel/5wzPS/

于 2011-02-06T00:00:12.660 に答える
1

テーブルのナンセンスをすべて飛ばしましょう！:)

<div>
    <img src="https://placehold.it/1000x1000">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

例: https://jsfiddle.net/te29m9fv/1/

于 2016-04-06T21:40:58.817 に答える
1

多分これはあなたのために働くでしょう（divあなたの画像を囲むdivです）：

div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

実行例。

于 2011-02-05T23:32:22.853 に答える