Div içindeki bir görüntüyü dikey olarak hizalama

İçeriği içeren bir görüntüyü nasıl hizalayabilirsiniz? div ?

Misal

Örneğimde, dikey <img>olarak <div>ile ortalamak gerekir class ="frame":

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

.frameyüksekliği sabittir ve resmin yüksekliği bilinmiyor. .frameTek çözüm buysa, yeni öğeler ekleyebilirim . Bunu Internet Explorer 7 ve sonrasında WebKit, Gecko'da yapmaya çalışıyorum.

Burada jsfiddle bakın .

.frame {
    height: 25px;      /* Equals maximum 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>

Bildiğim kadarıyla tek (ve en iyi çapraz tarayıcı) yolu , her iki inline-blocköğede height: 100%ve vertical-align: middleüzerinde bir yardımcı kullanmaktır .

Yani bir çözüm var: 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>

Veya, modern tarayıcılarda fazladan bir öğeye sahip olmak istemiyorsanız ve Internet Explorer ifadelerini kullanmayı düşünmüyorsanız, sözde bir öğe kullanabilir ve öğe başına yalnızca bir kez çalışan uygun bir İfade kullanarak Internet Explorer'a ekleyebilirsiniz. , bu nedenle herhangi bir performans sorunu olmayacaktır:

Internet Explorer ile :beforeve expression()Internet Explorer için çözüm : 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>

Nasıl çalışır:

1. Birbirine inline-blockyakın iki öğeniz olduğunda , birbirinizin yanına hizalayabilirsiniz, böylece vertical-align: middleböyle bir şey elde edersiniz:

   

2. Eğer (sabit yüksekliğe sahip bir blok olduğunda px, emya da başka bir mutlak birimi), içsel blok yüksekliği de ayarlayabilir% .

3. Yani, sabit yükseklikte bir blok içine bir tane eklemek inline-block, height: 100%içindeki başka bir inline-blocköğeyi ( <img/>sizin durumunuzda) dikey olarak yakınına hizalar .

Bu yararlı olabilir:

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

matejkramny'nin çözümü iyi bir başlangıçtır, ancak büyük boyutlu görüntülerin oranı yanlıştır.

İşte çatalım:

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

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;
}

Üç satırlık bir çözüm:

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

Bu her şey için geçerlidir.

Gönderen burada .

Bir saf CSS çözüm:

.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;
}

<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>

Anahtar şeyler

// 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

Daha modern bir çözüm için ve eski tarayıcıları desteklemeye gerek yoksa, bunu yapabilirsiniz:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: 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>

İşte bir Kalem: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Bu şekilde bir görüntüyü dikey olarak ortalayabilirsiniz ( demo ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Ayrıca, doğru sonucu elde etmek için Flexbox'ı kullanabilirsiniz:

.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>

Bir Orada süper kolay olan çözüm flexbox'a!

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

PI'nin CSS'sini şu şekilde ayarlamayı deneyebilirsiniz: display: table-cell; vertical-align: middle;

Aşağıdaki kodu deneyebilirsiniz:

.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>

Arka plan görüntüsü çözümü

Görüntü elemanını tamamen kaldırdım ve bir sınıfla div'ın arka planı olarak ayarladım .frame

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

Bu en azından Internet Explorer 8, Firefox 6 ve Chrome 13'te işe yarar.

Kontrol ettim ve bu çözüm 25 pikselden daha büyük görüntüleri küçültmek için çalışmayacak. Adlı bir mülk varbackground-sizeÖğenin boyutunu ayarlayan , ancak Internet Explorer 7 gereksinimleriyle çakışacak olan CSS 3.

Tarayıcı önceliklerinizi yeniden yapmanızı ve mevcut en iyi tarayıcılar için tasarlamanızı veya bu çözümü kullanmak isterseniz görüntüleri yeniden boyutlandırmak için sunucu tarafı kodu almanızı öneririm.

Sahip olduğunuzu hayal edin

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

Ve css:

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

Bunu yapabilirsin:

gösteri

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum 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 */
}    

JavaScript

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

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum 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;
}

Anahtar özellik display: table-cell;içindir .frame.Div.framebununla satır içi olarak görüntülendiğinden, onu bir blok öğesine sarmanız gerekir.

Bu Firefox, Opera, Chrome, Safari ve Internet Explorer 8'de (ve üstü) çalışır.

GÜNCELLEME

Internet Explorer 7 için bir CSS ifadesi eklememiz gerekiyor:

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

Çözümüm : 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;
}

Bu , kod tarayıcısında bu demoda gösterildiği gibi modern tarayıcılar için (düzenleme sırasında 2016) çalışır

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

Görüntüleri bir sınıf vermeniz veya ortalamanız gereken görüntüleri hedeflemek için kalıtım kullanmanız çok önemlidir. Bu örnekte .frame img {}, yalnızca sınıfı olan bir div tarafından sarılmış görüntülerin .framehedeflenmesi için kullandık.

Bu çözümü saf CSS ile deneyin http://jsfiddle.net/sandeep/4RPFa/72/

Belki de HTML'nizdeki ana sorundur. C lass&image heightHTML'nizde .

CSS:

.frame {
    height: 25px;      /* Equals maximum 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;
}

imgEtiketi ile çalıştığımda 3 piksel ila 2 piksel boşluk bırakıyor top. Şimdi azalıyorumline-height ve işe yarıyor.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    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-heightMülkiyet farklı tarayıcılarda farklı biçimde kullanılır. Bu nedenle, farklı line-heightözellik tarayıcıları tanımlamamız gerekir .

Bu örneği kontrol edin: http://jsfiddle.net/sandeep/4be8t/11/

line-heightFarklı tarayıcılarda farklı olanlarla ilgili bu örneği kontrol edin : Firefox ve Chrome'da giriş yüksekliği farklılıkları

Internet Explorer hakkında emin değilim, ancak Firefox ve Chrome altında img, bir divkapta varsa, aşağıdaki CSS içeriği çalışmalıdır. En azından benim için iyi çalışıyor:

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

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

Tablo ve tablo hücreleri kullanarak çözüm

Bazen tablo / tablo hücresi olarak görüntülenerek çözülmelidir. Örneğin, hızlı bir başlık ekranı. Ayrıca W3 tarafından önerilen bir yoldur. W3C.org'daki bir bloğu veya resmi merkezleme adlı bu bağlantıyı kontrol etmenizi öneririz.

Burada kullanılan ipuçları:

• Mutlak konumlandırma kabı tablo olarak görüntülenir
• Tablo hücresi olarak görüntülenen merkez içeriğe hizalanmış dikey

.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>

Şahsen ben bu amaçla yardımcıları kullanma konusunda katılmıyorum.

Benim için kolay bir yol:

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

Google Chrome için çok iyi çalışıyor. Bunu farklı bir tarayıcıda deneyin.

Görüntüyü bir kabın içinde ortalamak için (bir logo olabilir), bunun gibi bir metnin yanında:

Temel olarak görüntüyü sarıyorsunuz

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

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

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Eğer piksel büyüklüğünde marjlar ile yaşayabilir, sadece eklemek font-size: 1px;için .frame. Ama unutmayın, şimdi.frame 1em = 1px'de, yani kenar boşluğunu piksel olarak ayarlamanız gerekir.

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

Artık Opera'da ortalanmadı…

Ben de aynı problemi yaşadım. Bu benim için çalışıyor:

<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>

Bunu kullanabilirsiniz:

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

İşi kullanmak tableve table-cellyöntem yapmak, özellikle de bazı eski tarayıcıları hedeflediğiniz için, sizin için çalıştırabileceğiniz ve sonucu kontrol edebileceğiniz bir snippet oluşturuyorum:

.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> 

Merkez hizalama için dolgu kullanarak oynuyorum. Üst seviye dış kap boyutunu tanımlamanız gerekir, ancak iç kap yeniden boyutlandırılmalıdır ve dolguyu farklı yüzde değerlerine ayarlayabilirsiniz.

jsfiddle

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

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

img {
  width: 100%;
}

En iyi çözüm

.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;
}

Bunu kullan:

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

Ve değişebilirsin font-size.

Bir metin / başlıktan sonra olan ve her ikisi de bir div içinde olan bir görüntüyü hizalamak ister misiniz?

Bkz. JSfiddle veya Kod Parçacığını Çalıştırma.

Tüm öğelerinizde (div, img, title, vb.) Bir kimlik veya sınıf bulunduğundan emin olun.

Benim için bu çözümü tüm tarayıcılarda çalışır (mobil cihazlar için kodunuzu: @media ile uyarlamanız gerekir).

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 aligned after image inside a div by negative manipulate the img position</h2>
</div>