画像を中央に配置

I（絶対初心者）は、周りに少し余白を入れて画像をボックスに入れたいと思っています。私は詰め物を試したので、うまくいかなかった。それで、私はこれを試しました：画像を中央に配置

<div style="border:1px solid #CC6699; width:11em; height:5.5em;"> 
    <img style="align:center; width:10em; height:5em;" src="path"> 
</div>

代わりに、画像は左上隅に止まります。これを行う方法の

出典

2009-08-11 Anonymous

カップル：私のいつもの

ではなく、背景画像を設定することです。あなたのHTML内

div#img_container { 
    background: url(images/myImage.png) center center 
}

：あなたのCSSで

<div id="img_container"></div>

またはちょうどあなたのCSS

img#myImage { 
    padding: 20px; 
}

をし、HTMLでその周りにいくつかのパディングを入れて

<img id="myImage" src="images/myImage.png" />

出典

2009-08-11 12:48:29

最初の提案は、ある種の装飾的なイメージについて話している場合にのみ適切です。実際にコンテンツの一部であるイメージの場合は、これを行わないでください。 2番目の方がマージンを取った方が良いでしょう。 –

パッディングの原因で彼はそれを試みたと言いました。しかし、両方のアカウントで正しいです。 –

CSSレベル2には、物事を垂直にセンタリングするプロパティはありません。 CSSレベル3にはおそらく1つが存在します。しかし、CSS2でも、いくつかのプロパティを組み合わせることによって、ブロックを垂直に配置することができます。このトリックは、表のセルの内容を垂直方向の中央に配置できるため、外側のブロックを表のセルとしてフォーマットすることを指定することです。

<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;"> 
    <img style="width:10em; height:5em;" src="path"> 
</div>

EDIT

rpfloが示唆するように、容器は、画像よりも小さくなるように発生した場合、バックグラウンド位置プロパティを使用することは特に大きいです。画像にタイルを貼りたくない場合は、「background-repeat：none」スタイルを含めてください。

出典

2009-08-11 12:53:09 Joshua

あなたのCSSの生活の後半に表示されることに注意してください。テーブルセルは、浮動小数点のような他のスタイルでうまく再生されません。 –

私はrpfloに同意します。良い解決策ではありません。テーブルはテーブル用であり、デザイン用ではありません。 – ChrisBenyamin

はこれを試してみてください：

<html> 
<head> 
<style> 
#wrap { 
width: 500px; 
text-align: center; 
} 
.pic { 
padding: 5px; 
border: 2px solid #000; 
} 
</style> 
</head> 
<body> 
<div id="wrap"> 
    <img src="logo.gif" class="pic"> 
</div> 
</body> 
</html>

出典

2009-08-11 12:57:08 ChrisBenyamin

は、以下の小さなjQueryプラグインを使用します。これは、指定されたコンテナ（上下左右）の中央にローディング画像をセンタ： http://plugins.jquery.com/project/CenterImage

デモサイト： http://www.demosites.somee.com/demos/centerimage.html

使用法：このプラグインの位置ローディング画像を中央に指定されたHTMLコンテナ（DIV、上スパン...）。

現在利用可能な構成設定：

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

初期化するための最小構成：このローディング画像（及びオーバーレイ）を除去するために

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

コール

$('.4th').CenterImage('remove');

出典

2011-06-15 09:47:20 Jovica

これは有効な解決策であるかもしれませんが、OPはjQueryではなくCSSタグで問題をマークしました。 – Artemix

答えて

関連する問題