web-dev-qa-db-ja.com

Div内の画像を垂直方向に揃える方法は？

質問

どのようにあなたはそれを含むdivの中に画像を整列させることができますか？

例

私の例では、<img>内の<div>をclass ="frame "で垂直方向に中央揃えする必要があります。

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameの高さは固定されており、画像の高さは不明です。それが唯一の解決策である場合、私は.frameに新しい要素を追加することができます。私はIE≥7、Webkit、Geckoでこれをやろうとしています。

Jsfiddleを参照してください ここ

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;
    
    text-align: center; margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
        
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>
cssimagevertical-alignment
1281
Arnaud Le Blanc

私が知っている唯一の（そして最良のクロスブラウザ）方法は、両方の要素でinline-blockとheight: 100%でvertical-align: middleヘルパーを使用することです。

解決策があります： http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

または、現代のブラウザーに余分な要素を持ちたくない場合、Internet Explorer式の使用を気にしない場合は、擬似要素を使用し、要素ごとに1回だけ実行される便利な式を使用してInternet Explorerに追加できます、したがって、パフォーマンスの問題はありません。

Internet Explorer用の:beforeおよびexpression()を使用したソリューション： http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

使い方：

  1. 2つのinline-block要素が互いに近くにある場合、互いを並べることができるため、vertical-align: middleを使用すると次のようになります。

    Two aligned blocks

  2. 高さが固定されたブロック（px、em、またはその他の絶対単位）がある場合、%で内部ブロックの高さを設定できます。

  3. そのため、高さを固定したブロックにinline-blockでheight: 100%を1つ追加すると、その中の別のinline-block要素（あなたの場合は<img/>）が垂直に近く整列します。
2002
kizu

これは便利かもしれません： 

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

参照： http://www.student.oulu.fi/~laurirai/www/css/middle/

473
Tahir Yasin

matejkramnyの解決策は良いスタートですが、特大の画像は間違った比率を持ちます。
これが私のフォークです：

デモ： https://jsbin.com/lidebapomi/edit？html、css、出力

preview

HTML：

<div class="frame">
  <img src="foo"/>
</div>

CSS：

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}
421
jomo

3行ソリューション

position: relative;
top: 50%;
transform: translateY(-50%);

これは何にでも当てはまります。

ここから 。

189
Jorge Orpinel

ピュアCSSソリューション：

http://jsfiddle.net/3MVPM/

CSS： 

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

鍵となるもの 

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
130
code ninja

この記事にたどり着き、より現代的な解決策に興味があり、そしてレガシーブラウザをサポートする必要がないのなら、これを行うことができます。

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

これがペンです： http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

108
Ricardo Zea

これにより、画像を縦方向に中央揃えできます（ demo ）。

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}
97
user669677

PIのCSSをdisplay: table-cell; vertical-align: middle;に設定してみてください

22
Yeodave

また、Flexboxを使って正しい結果を得ることもできます。

.parent {
  align-items: center; /* for vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}
<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

19
tourniquet

flexbox！を使った超簡単解決策があります

.frame {
    display: flex;
    align-items: center;
}
19
BBlackwo

あなたは以下のコードを試すことができます 

.frame{
 display:flex;
 justify-content: center;
 align-items: center;
 width:100%;
} 
<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

14
Santosh Khalse

背景画像の解決方法 私は画像要素をまとめて削除し、.frameのクラスでdivの背景として設定しました。

http://jsfiddle.net/URVKa/2/

これは少なくともIE8、FF6、Chrome13ではうまくいきます。

私はチェックしました、この解決策は25pxよりも大きい画像を縮小するのにはうまくいきません。要素のサイズを設定するbackground-sizeというプロパティがありますが、IE7の要件と矛盾するのはCSS3です。

私はあなたのブラウザの優先順位を再設計して利用可能な最高のブラウザのためにデザインするか、この解決策を使いたいのであれば画像をリサイズするためのサーバーサイドコードを入手することを勧めます

14
Benjamin Udink ten Cate

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    text-align: center; 
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

重要なプロパティはdisplay：table-cellです。 .frameのDiv.frameはこれとインラインで表示されるので、ブロック要素で囲む必要があります。

これはFF、Opera、Chrome、SafariそしてIE8 +で動作します。

更新

IE7の場合、CSS式を追加する必要があります。

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
11
Webars

あなたはこれをすることができます：

デモ

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* here.. */
    left: 50%;           /* here... */
    position: absolute; /* and here */
}


ジャバスクリプト

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
11
Joseph Marikle

純粋なCSSでこのソリューションを試してみてください http://jsfiddle.net/sandeep/4RPFa/72/ あなたのHTMLの主な問題かもしれません。あなたのHTMLでclassとimage heightを定義するとき、あなたは引用符を使わない。 

CSS：

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    position:relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom:20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;
    margin:0 auto;
    max-height:25px;
}

編集：

imgタグを使って作業するときは、topから3px to 2pxスペースを残します。今私はline-heightを減らします、そして、それは働きます。 css：

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height:0;    
        max-height:25px;
        max-width:160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* webkit browsers */
    }

line-heightプロパティは、ブラウザによってrenderが異なります。そう;異なるline-heightプロパティブラウザを定義する必要があります 

この例をチェックしてください http://jsfiddle.net/sandeep/4be8t/11/

ブラウザごとに異なるline-heightについてのこの例をチェックしてください FirefoxとChromeでの入力の高さの違い

7
sandeep

IEについてはわかりませんが、FirefoxおよびChromeの下で、imgコンテナ内にdivがある場合は、次のCSSが機能します。少なくとも私にとってはうまくいく：

div.img-container {
    display:table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}
7
slava

私の解決策： http://jsfiddle.net/XNAj6/2/ /

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}
6
Ilya Lysenko

私のために働く簡単な方法：

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Google Chromeで非常にうまく機能します。別のブラウザで試してみてください。

5
DOCTYPE HTML

これはこの codepenのデモ に示すように、最近のブラウザ（編集時の2016年）で動作します

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

画像にクラスを付けるか、継承を使って中心に配置する必要がある画像をターゲットにすることが非常に重要です。この例では.frame img {}を使い、クラスが.frameのdivで囲まれた画像だけをターゲットにします。

5
anglimasS

テーブルとテーブルセルを使用したソリューション

時々それはtable/table-cellとして表示することによって解決されるべきです。たとえば、速いタイトル画面です。 W3でもおすすめの方法です。 Centering things というW3C.orgのリンクをチェックすることをお勧めします。

ここで使用されるヒントは以下のとおりです。

  • テーブルとして表示される絶対位置コンテナ
  • 表のセルとして表示される中央のコンテンツに垂直に配置

.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}
<div class="container">
  <div class="content">
    <h1 style="text-align:center"> PEACE IN THE WORLD </h1>
 </div>
</div>

個人的には、この目的のためにヘルパーを使用することに実際反対します

5
Sam

あなたがピクセルサイズのマージンで生きることができるならば、ちょうどfont-size: 1px;を.frameに加えてください。しかし、.frame 1em = 1pxでは、余白をピクセル単位で設定する必要があることを忘れないでください。

http://jsfiddle.net/feeela/4RPFa/96/ /

編集：今ではもうオペラの中心ではない...

4
feeela

このようなテキストの他に、コンテナの内側の画像（ロゴの場合もあります）を中央揃えにします。

enter image description here

基本的にあなたは画像をラップします 

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; //only for align horizontally
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
//height: auto;
  vertical-align: middle;
}
<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

4
juliangonzalez

あなたはこれを使用することができます：

.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;

}

2
Masoume Karvar

私は同じ問題を抱えていました。これは私のために働く：

<style type="text/css">
div.parent {
     position: relative;
}

img.child {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}
</style>

<div class="parent">
    <img class="child">
</div>
2
algreat

tableメソッドとtable-cellメソッドを使用すると、特に古いブラウザもターゲットにしているため、この作業を実行できます。このコードを実行して結果を確認できます。

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}
<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

2
Alireza

あなたが持っていると想像してください

<div class="wrap">
    <img src="#">
</div>

そしてCSS：

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
0
fdrv

このコードは私にはうまくいきます。

<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
 .listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>

<div class="listing_container">
    <img src="http://www.advancewebsites.com/img/theme1/logo.png">  
 </div>
0
sandeep kumar

私は似たような答えを探していて、いくつかの提案が画像を左にスナップさせたり、縦の比率が画像を縮小したりしたので、この解決策を思いついた。

 .div{
    position: relative;
    overflow: hidden;
 }
 .bantop img {
    position: absolute;
    margin: auto;
    width: 103%;
    height: auto;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
  }

私はいくつかのプロジェクトでそれを使用し、それはシャムのように動作します

0
Samuel Ramzan

これはどう？

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

font-sizeを変えることができます

0
th3pirat3

最善の解決策は

.block{
    /* decor */
    padding:0 20px;
    background:#666;
    border:2px solid #fff;
    text-align:center;
    /* important */
    min-height:220px;
    width:260px;
    white-space:nowrap;
}
.block:after{
    content:'';
    display:inline-block;
    height:220px; /* the same as min-height */
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
.block span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}
0
Kumar

中央揃えにパディングを使用して遊んでいます。最上位の外部コンテナサイズを定義する必要がありますが、内部コンテナはサイズ変更する必要があり、パディングはさまざまなパーセント値で設定できます。

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}
0
steven iseki

私がここに投稿した古いJSFiddleリンクは、もはや機能しませんでした。これが正当な答えであるためだけに、私はまだjQueryソリューションを再び投稿したいと思います。これはv_alignクラスが適用されているすべての要素に対して機能します。これは、親の中央に垂直に配置され、ウィンドウのサイズ変更時に再計算されます。

JSFiddleへのリンク

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = '.v_align';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}
0
Chris

テキスト/タイトルの後に両方ともdivの内側にある画像を整列させたいですか？

JSfiddle またはRun Code Snippetを参照してください。

すべての要素（div、img、titleなど）にIDまたはクラスがあることを確認してください。

私にとっては、この解決策をすべてのブラウザで機能させます（モバイルデバイスの場合は、コードを@mediaで調整する必要があります）。

h2.h2red {
color: red; 
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;  
display: block;  
float: left;/*If you want to allign the text with an image on the same row*/  
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>

0
mariusfv