Jak wyrównać obraz w pionie wewnątrz div

To może być przydatne:

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

Rozwiązanie Matejkramny to dobry początek, ale za duże obrazy mają zły stosunek.

Oto mój widelec:

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

Rozwiązanie trójliniowe:

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

Z tutaj .

A pure CSS solution:

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

Kluczowe rzeczy

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

Dla bardziej nowoczesnego rozwiązania, a jeśli nie ma potrzeby obsługi starszych przeglądarek, możesz to zrobić:

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

Oto Długopis: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

W ten sposób możesz wyśrodkować obraz w pionie (demo):

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

Możesz również użyć Flexbox, aby uzyskać poprawny wynik:

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

Istnieje super łatwe rozwiązanie z flexbox!

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

Możesz spróbować ustawić CSS PI na display: table-cell; vertical-align: middle;

Możesz wypróbować poniższy kod:

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

Wyobraź sobie, że masz

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

I css:

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

Rozwiązanie obrazu tła

Usunąłem element obrazka i ustawiłem go jako tło div z klasą .frame

Http://jsfiddle.net/URVKa/2/

To przynajmniej działa dobrze na Internet Explorer 8, Firefox 6 i Chrome 13.

Sprawdziłem, i to rozwiązanie nie będzie działać, aby zmniejszyć obrazy większe niż 25 pikseli wysokości. Istnieje właściwość o nazwie background-size, która ustawia rozmiar elementu, ale to CSS 3 może być sprzeczny z Internet Explorer 7 wymagania.

Radzę ci albo zmienić priorytety przeglądarki i zaprojektować najlepsze dostępne przeglądarki, albo uzyskać kod po stronie serwera, aby zmienić rozmiar obrazów, jeśli chcesz użyć tego rozwiązania.

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

Właściwością klucza jest display: table-cell; dla .frame. Div.frame jest wyświetlany jako inline z tym, więc musisz owinąć go w element blokowy.

UPDATE

Dla Internet Explorera 7 musimy dodać wyrażenie CSS:

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

Możesz to zrobić:

Demo

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

To działa w nowoczesnych przeglądarkach (2016 w momencie edycji), jak pokazano w tym demo na codepen

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

Jest bardzo ważne, aby nadać obrazom klasę lub użyć dziedziczenia, aby skierować obrazy, które potrzebujesz wyśrodkować. W tym przykładzie użyliśmy .frame img {}, Aby tylko obrazy zawinięte przez div z klasą .frame były kierowane.

Moje rozwiązanie: 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;
}

Wypróbuj To rozwiązanie z czystym CSS http://jsfiddle.net/sandeep/4RPFa/72/

Może to jest główny problem z Twoim HTML. Nie używasz cudzysłowów, gdy definiujesz class & image height w Twoim HTML.

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

Kiedy pracuję z tagiem img, zostawiam 3 piksele na 2 piksele z top. Teraz zmniejszam line-height i to działa.

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

Właściwość line-height jest renderowana inaczej w różnych przeglądarkach. Więc, my trzeba zdefiniować różne przeglądarki właściwości line-height.

Sprawdź ten przykład: http://jsfiddle.net/sandeep/4be8t/11/

Sprawdź ten przykład o line-height różne w różnych przeglądarkach: różnice wysokości wejścia w Firefox i Chrome

Nie jestem pewien co do Internet Explorera, ale pod Firefoksem i Chrome, jeśli masz img w div kontenerze, następująca zawartość CSS powinna działać. Przynajmniej dla mnie działa dobrze:

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

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

Rozwiązanie z wykorzystaniem tabeli i komórek tabeli

Czasami powinno być rozwiązane przez wyświetlenie jako table / table-cell. Na przykład szybki ekran tytułowy. Jest to również zalecany sposób przez W3. Polecam sprawdzić ten link o nazwie Centrowanie bloku lub obrazu od W3C.org.

Użyte tu wskazówki to:

• absolutny kontener pozycjonujący wyświetlany jako Tabela
• wyrównane pionowo do środka zawartość wyświetlana jako table-cell

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

Osobiście nie zgadzam się z używaniem helperów do tego celu.

Prosty sposób, który działa dla mnie:

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

To działa na Google Chrome bardzo dobrze. Wypróbuj ten w innej przeglądarce.

Do wyśrodkowania obrazu wewnątrz kontenera (może to być logo) oprócz tekstu takiego jak ten:

Zasadniczo zawijasz obraz

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

Jeśli możesz żyć z marginesami wielkości pikseli, po prostu dodaj {[0] } do .frame. Ale pamiętaj, że teraz na .frame 1em = 1px, co oznacza, że musisz ustawić margines w pikselach.

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

Teraz nie jest już wyśrodkowany w Operze...

Miałem ten sam problem. To mi działa:

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

Możesz użyć tego:

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

CSS Grid

Jeśli chcesz wyrównać pojedynczy obraz w pionie wewnątrz kontenera, możesz użyć tego:

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column; 
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

img.vertical-align {
  align-self: center;
}

<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img class="vertical-align" src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

Jeśli chcesz wyrównać wiele obrazów wewnątrz kontenera, możesz użyć tego:

.img-container {
  display: grid;
  align-items: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

Proszę zauważyć, że użyłem grid-auto-flow: column w obu przypadkach, ponieważ w przeciwnym razie elementy zawijają się do wiersza z określeniem jawnych elementów siatki. W kodzie zapytania widzę punkt wyśrodkowany poziomo też. W takim przypadku wystarczy użyć place-items: center zamiast align-items: center.

Za pomocą metody table i table-cell Wykonaj zadanie, szczególnie dlatego, że kierujesz również niektóre stare przeglądarki, tworzę dla Ciebie snippet, który możesz uruchomić i sprawdzić wynik:

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

Chcesz wyrównać obraz, który ma po tekście / tytule i oba są wewnątrz div?

Zobacz na JSfiddle lub uruchom fragment kodu.

Po prostu upewnij się, że masz ID lub klasę we wszystkich swoich elementach (div, img, title itp.).

Dla mnie To rozwiązanie działa na wszystkich przeglądarkach (dla urządzeń mobilnych należy dostosować kod za pomocą: @ 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 aligned after image inside a div by negative manipulate the img position</h2>
</div>

Bawiłem się używaniem padding do wyrównania środka. Musisz zdefiniować górny poziom zewnętrznego rozmiaru kontenera, ale wewnętrzny powinien zmienić rozmiar i możesz ustawić wypełnienie na różne wartości procentowe.

Jsfiddle

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

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

img {
  width: 100%;
}

Najlepszym rozwiązaniem jest to, że

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