0

画像「image.jpg」のdivがあります。

を使用するtext-align=centerと、画像は水平方向の中央に配置されます。

ただし、垂直方向に配置されていません。垂直方向の配置をどのように実装しますか？

<div style="vertical-align: middle;text-align:center;">
    <img title="Title3" src="image.jpg" style="display: inline;" id="idImage">
</div>
4

3 に答える 3

1

この記事vertical-alignで説明されているようにプロパティを使用します。仕事に取り掛かるには、あなたもそうする必要があることに注意してください。vertical-aligndisplay: table-cell

div.centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* other styling */
}

私があなた<div>にクラス名を付けたところcentered。

また、中央揃えには使用しないでください。text-align代わりmargin: 0 auto;に、画像のスタイルを追加してください。

編集

HTML：

<div class="centered">
    <img src="..." class="centered-image" />
</div>

CSS：

div.centered {
    display: table-cell;
    vertical-align: middle;
}

img.centered-image {
    margin: 0 auto;
}
于 2012-08-22T18:49:04.740 に答える
0

これが機能するためには、ディメンションを知っている必要があります（または、異なるディメンションがある場合は、javascriptを使用してディメンションを取得します）。これにより、画像が水平方向に中央揃えになります（したがって、は必要ありませんtext-align=center）

css-tricksから取得

.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

高さと幅は問題の画像のものであり、上下の余白はそれぞれの高さと幅の半分に設定されています。

于 2012-08-22T18:46:08.160 に答える
0

親コンテナの高さを設定して設定するmargin-top: autoと、中央に揃えられるはずだと思います。これは水平方向の位置合わせで機能しますが、垂直方向では試していません。とにかく、それは絶対的なポジショニングを避けます

前に述べたように、javascriptを使用して高さを見つけ、マージンを設定することもできます。次のようになります。 

var image = document.getElementById("myImage");
var imgHeight = image.style.height;
image.style.marginTop = -(imgHeight/2);
image.style.top = 50%; //you can probably just set this in css and omit this line

もちろん設定する必要があります 

#myImage{
  position: absolute;
}

けれど

于 2012-08-22T18:47:58.593 に答える