Jak wyrównać obraz pionowo w div

Jak możesz wyrównać obraz wewnątrz zawierającego div?

Przykład

W moim przykładzie muszę wyśrodkować <img>w pionie za <div>pomocą class ="frame„:

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

.framewysokość jest ustalona, ​​a wysokość obrazu jest nieznana. Mogę dodawać nowe elementy, .framejeśli to jedyne rozwiązanie. Próbuję to zrobić w przeglądarce Internet Explorer 7 i nowszych, WebKit, Gecko.

Zobacz jsfiddle tutaj .

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

Jedyny (a najlepiej cross-browser) sposób co wiem jest użycie inline-blockpomocnika z height: 100%i vertical-align: middlena obu elementów.

Istnieje więc rozwiązanie: 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>

Lub, jeśli nie chcesz mieć dodatkowego elementu we współczesnych przeglądarkach i nie masz nic przeciwko używaniu wyrażeń Internet Explorera, możesz użyć pseudoelementu i dodać go do Internet Explorera za pomocą wygodnego wyrażenia, które działa tylko raz na element , więc nie będzie żadnych problemów z wydajnością:

Rozwiązanie z :beforei expression()dla Internet Explorera: 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>

Jak to działa:

1. Kiedy masz dwa inline-blockelementy blisko siebie, możesz wyrównać je względem siebie, dzięki vertical-align: middleczemu otrzymasz coś takiego:

   

2. Gdy ma blok o stałej wysokości (w px, emlub w innym urządzeniu absolutnej), można ustawić wysokość wewnętrznych bloków %.

3. Tak więc dodanie jednego inline-blockz height: 100%blokiem o stałej wysokości wyrównałby inline-blockw nim kolejny element ( <img/>w twoim przypadku) pionowo w jego pobliżu.

Może to 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 zbyt duże obrazy mają niewłaściwy współczynnik.

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

Trzy liniowe rozwiązanie:

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

Dotyczy to wszystkiego.

Od tutaj .

Czysty roztwór 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;
}

<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

Aby uzyskać bardziej nowoczesne rozwiązanie i 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 ( demonstracja ):

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

Możesz także użyć Flexboksa, 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 bardzo proste 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>

Rozwiązanie dla obrazu tła

Całkowicie usunąłem element obrazu i ustawiłem go jako tło div z klasą .frame

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

Działa to przynajmniej dobrze w Internet Explorerze 8, Firefox 6 i Chrome 13.

Sprawdziłem, a to rozwiązanie nie zadziała, aby zmniejszyć obrazy o wysokości większej niż 25 pikseli. Istnieje właściwość o nazwie, background-sizektóra określa rozmiar elementu, ale CSS 3 koliduje z wymaganiami programu Internet Explorer 7.

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 skorzystać z tego rozwiązania.

Wyobraź sobie, że masz

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

I css:

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

Możesz to zrobić:

Próbny

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

Kluczowa właściwość jest display: table-cell;dla .frame. Div.framejest wyświetlany jako zgodny z tym, więc musisz zawinąć go w element bloku.

Działa to w Firefox, Opera, Chrome, Safari i Internet Explorer 8 (i nowszych).

AKTUALIZACJA

W przypadku przeglądarki Internet Explorer 7 musimy dodać wyrażenie CSS:

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

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

Działa to w przypadku nowoczesnych przeglądarek (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;
}

Bardzo ważne jest, aby albo nadać obrazom klasę, albo użyć dziedziczenia, aby kierować na obrazy, których potrzebujesz wyśrodkować. W tym przykładzie wykorzystaliśmy .frame img {}tak, że .framecelem byłyby tylko obrazy owinięte przez div z klasą .

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

Być może jest to główny problem z Twoim HTML. Nie używasz cudzysłowów podczas definiowania c lass& image heightw swoim 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 imgtagiem, pozostawia od 3 do 2 pikseli miejsca top. Teraz zmniejszam się line-heighti 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 */
    }

Ta line-heightwłaściwość jest renderowana inaczej w różnych przeglądarkach. Musimy więc zdefiniować różne line-heightprzeglądarki właściwości.

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

Sprawdź ten przykład na temat line-heightróżnych w różnych przeglądarkach: wprowadzaj różnice wysokości w Firefox i Chrome

Nie jestem pewien co do Internet Explorera, ale pod Firefox i Chrome, jeśli masz imgw divkontenerze, poniższe treści CSS powinny 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 za pomocą tabeli i komórek tabeli

Czasami należy to rozwiązać, wyświetlając jako tabelę / komórkę tabeli. Na przykład szybki ekran tytułowy. Jest to również zalecany sposób przez W3. Polecam sprawdzić ten link o nazwie Wyśrodkowanie bloku lub obrazu z W3C.org.

Zastosowane tutaj wskazówki to:

• Pojemnik do absolutnego pozycjonowania wyświetlany jako tabela
• Wyrównany w pionie do środkowej zawartości wyświetlanej jako komórka tabeli

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

Ja osobiście nie zgadzam się na użycie pomocników do tego celu.

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

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

Działa bardzo dobrze dla Google Chrome. Wypróbuj ten w innej przeglądarce.

Do wyśrodkowania obrazu wewnątrz kontenera (może to być logo) oprócz niektórych takich tekstów:

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 font-size: 1px;do .frame. Pamiętaj jednak, że teraz na .frame1em = 1px, co oznacza, że ​​musisz również ustawić margines w pikselach.

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

Teraz nie jest już wyśrodkowany w Operze…

Miałem ten sam problem. To działa dla mnie:

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

Używając tablei table-cellmetody, wykonuj zadanie, szczególnie dlatego, że celujesz w niektóre stare przeglądarki, tworzę dla ciebie fragment, 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> 

Bawiłem się używając paddingu do centrowania. Będziesz musiał zdefiniować rozmiar pojemnika zewnętrznego najwyższego poziomu, ale rozmiar pojemnika wewnętrznego powinien się zmienić 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

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

Użyj tego:

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

I możesz się różnić font-size.

Chcesz wyrównać obraz, który ma tekst / tytuł i oba są w div?

Zobacz w JSfiddle lub Run Snippet Code.

Pamiętaj tylko, aby mieć identyfikator lub klasę we wszystkich elementach (div, img, title itp.).

Dla mnie działa to rozwiązanie we wszystkich przeglądarkach (w przypadku urządzeń mobilnych musisz dostosować swój 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>