14
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
このボックスの中央から画像を開始するにはどうすればよいですか？ （縦と横の中間）画像を中央と中央の両方に縦横に配置する方法
A
答えて
26
は、これを行うには、いくつかの方法があり、それはすべてのブラウザ（IE7 +残り）で作業する必要がある場合、あなたはそれが例いくつかで動作させるためにさまざまなことを行う必要があります。
絶対位置を使用してください。これは画像のサイズがわかっている場合にのみ有効です。 ここでは
position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>に設定します。 http://jsfiddle.net/JPch8/使用
margin: 0 auto;text-align: center;とline-height/font-size：は、ここで例を参照してください。 これは、画像のようなインラインブロック要素のために、IEで行の高さが動作しないので、少し難解です。これがフォントサイズが入る場所です。 基本的には、イメージコンテナの行の高さをコンテナの高さと同じに設定します。これはインライン要素を垂直に配置しますが、IEではフォントサイズを設定する必要があります。
ここで例を参照してください：
display: flexをサポートする最新のブラウザでhttp://jsfiddle.net/JPch8/2/をあなたは、単に
display: flex; align-items: center; justify-content: center;にコンテナのdivを設定することによってそれを行うことができ、ここでの例を参照してください：https://jsfiddle.net/ptz9k3th/
-2
私はあなたが達成しようとしていることを理解してくれることを願っています。
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
+9
-1です。センターが、画像のためにその仕事をして感謝 –
+0
@Caspar Kleijneを殺し、私は本当に私がテキスト整列を知っているCSSで画像を中央にする方法がわかりません？： auto;またはmargin：0 auto;水平方向の配置にのみ影響を与える場合。 –
+0
マージン：あなたはちょうどあなたが正しい2匹の子猫:( – Cfreak
0
」float:left; position:relativeを"おそらく期待どおりに動作しません。浮動要素は絶対と見なされます。
画像を垂直にセンタリングするには、divの高さが必要です。その高さが必要です。 （垂直にセンタリングするのは一種の痛みです）。これらの要素が唯一の要素だが、コンテナ上のheight: 100%が残りのレイアウトに影響する可能性があることに注意してください。
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
0
は、代わりにあなたが実際に（画像をセンタリングするためにwidthと<div>ボックスのheightを指定することができるボックス
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
のサイズを指定せずにtext-align:center;と<div>に画像を置きますdivボックス）。
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
画像が必要ない場合は、background-position：centerとbackground-repeat：no-repeatでdivの背景に追加することを検討できます。中心タグを使用する場合は –