Jak wyrównać obraz pionowo w div

1456

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>

Arnaud Le Blanc
źródło
3
Cześć, przepraszam, ale nie zgadzam się z tym, że pomocnik jest tutaj najbardziej cenionym rozwiązaniem. Ale to nie jedyny sposób. Inne są tak samo obsługiwane przez przeglądarki. Oferuję rozwiązanie tutaj stackoverflow.com/a/43308414/7733724 i W3C.org na temat informacji. Mógłbyś sprawdzić. Pozdrawiam
Sam
Przydatny będzie artykuł Reading Centering Things na W3C: w3.org/Style/Examples/007/center.en.html
QMaster
Idealny przewodnik dla align css-tricks.com/centering-css-complete-guide
Michael Yurin

Odpowiedzi:

2128

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/

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/


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:

    Dwa wyrównane bloki

  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.
kizu
źródło
2
Możesz zobaczyć na własne oczy : jsfiddle.net/kizu/Pw9NL - tylko pola śródliniowe nie generują pola, ale wszystkie inne przypadki działają poprawnie.
kizu
3
Bardzo dobra odpowiedź. Walczyłem ze spacjami między wstawionymi elementami bloku, czyli między .framei .frame:before. Proponowanym tutaj rozwiązaniem jest dodanie margin-left: -4pxdo .frame. Mam nadzieję że to pomoże.
Mick
111
ZWRÓĆ UWAGĘ, że: <img src=""/>NIE znajduje się wewnątrz <span></span>dodanego pomocnika. Jest na zewnątrz. Prawie wyciągnąłem każdy kosmyk włosów, nie zdając sobie z tego sprawy.
ryan
50
Wygląda na to, że musisz także dodać „white-space: nowrap;” do ramki lub napotkasz problem, jeśli masz przerwę między obrazem a rozpiętością pomocnika. Zajęło mi godzinę, dlaczego to rozwiązanie nie działało dla mnie.
juminoz
2
W moim przypadku mój obraz miał maksymalną wysokość i maksymalną szerokość ustawioną na 100%, aby obraz skalował pojemnik, a ta metoda nie działała. Moje rozwiązanie polegało na zmianie tych wartości na 90% (co w moim przypadku było w porządku; w innej sytuacji może być konieczne odpowiednie skalowanie pojemnika), a także dodaniu pomocnika po drugiej stronie obrazu, aby dopełnienie pozostało nawet na obie strony.
Eric Dubé,
513

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
}
Tahir Yasin
źródło
74
Jeśli chcesz również wyrównać obraz w poziomie, dodaj po lewej: 0; prawo: 0; do img
jameskind
czy ten rly nie działa w IE10? Używam tego wszędzie
Max Yari,
Działa również (dla mnie) z div konteneraposition:fixed;
PJ Brunet
1
Najłatwiejsze i najczystsze rozwiązanie dzięki!
KDT
Dzięki! Pracował dla mnie !!
Alexander Malygin
486

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

zapowiedź


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;
}
jomo
źródło
Czy jest jakiś sposób na dostosowanie tego, aby można było powiększyć powiększony obraz, powiedzmy 2x, i nadal pozostawałby wyśrodkowany poziomo i pionowo?
Justin,
Jeśli chcemy, aby działało to dla pionowego wyrównania do dołu zamiast do środka, jakie kody należy zmodyfikować?
Bobo
1
@ Bobo wystarczy usunąć top: 0;. Powoduje bottom: 0;to zastosowanie tylko w pionie.
jomo
Najlepsza odpowiedź!
user315338
276

Trzy liniowe rozwiązanie:

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

Dotyczy to wszystkiego.

Od tutaj .

Jorge Orpinel
źródło
Prefiksy: -ms- lub -webkit- (przed transformacją). w3schools.com/cssref/css3_pr_transform.asp
Jorge Orpinel
3
Prefiksy dla IE9, ale w ogóle nie działają w IE8 i niższych: caniuse.com/#search=transform Ale moja opinia: Nie dbam o IE8
Reign.85
Nikt nie zauważył, co się dzieje, gdy dziecko, które ma być wyśrodkowane, jest wyższe niż ekran urządzenia, a rodzic jest pierwszym dzieckiem w DOM ...?
tao
3
Fajny, gdy nie możesz go użyć, position: absolute;ponieważ potrzebujesz płynnej szerokości.
plong0
2
Najlepsze jak dotąd rozwiązanie, nawet lepsze niż Flexbox, z obsługą większości przeglądarek nowoczesnych i starszych.
Głosuj
141

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
Matej
źródło
Proszę dać mi skierowanie do przewodnika tutaj, że nawet prace dla IE5 (odejmując od tego, co już do tej pory przeczytać w poście) webmasterworld.com/css/3350566.htm
Matej
to rozwiązanie jest dobrym początkiem, ale powiększone obrazy są zmieniane z niewłaściwym współczynnikiem . Proszę zobaczyć moją odpowiedź.
jomo
@ HansWürstchen tak, ale chodzi o to, aby wyśrodkować, czy wybór jest zbyt duży. Dodanie więcej css = więcej bałaganu :)
Matej
1
@matejkramny nie dostać przewymiarowane. jeśli obraz jest zbyt duży, ma niewłaściwy współczynnik. oznacza to, że jest rozciągnięty na wysokość i nie wygląda poprawnie.
jomo
✔ Wow, działa to z przepełnionymi obrazami (większymi niż opakowanie), zaakceptowana odpowiedź nie.
Cedric Reichenbach,
120

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

Ricardo Zea
źródło
3
Jest to szczególnie przydatne, jeśli wysokość pojemnika nie jest ustawiona
Dave Barnett
lub align-selfdla pojedynczych przedmiotów
Michael
Problem align-selfpolega na tym, że elementy elastyczne rozciągną wysokość pojemnika nadrzędnego.
Ricardo Zea
101

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;
}
Peter Mortensen
źródło
4
Dziwne, że nie mogłem uzyskać akceptowanej odpowiedzi do pracy w mojej sytuacji (przycinałem również obraz z przepełnieniem: ukryty). Działa to jednak idealnie.
Luca Spiller,
3
Testowałem to tylko w Chrome, ale kluczem wydaje się wysokość linii. Jednak umieszczam atrybut divign-align na div, a nie img, ponieważ mój img znajduje się w kotwicy (<a/>).
Todd Price
1
Tak, znacznie prostsze niż przyjęte rozwiązanie i działa pięknie. Znalazłem również to rozwiązanie w jsfiddle.
vdboor
1
Jeśli wiesz, na jakie wysokości się
liczyć
Z mojego doświadczenia to rozwiązanie działa tylko w font-size: 0przypadku div. W przypadku dość dużych pojemników możesz go przegapić, ale jeśli masz 100 divpikseli, a img to 80 pikseli, będzie o kilka pikseli niższy.
alTus
38

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>

opaska zaciskająca
źródło
28

Istnieje bardzo proste rozwiązanie z Flexbox!

.frame {
    display: flex;
    align-items: center;
}
BBlackwo
źródło
5
Tak, ale prawie nie widać tego we wszystkich odpowiedziach. Próbowałem to podkreślić w prosty i jasny sposób, ponieważ jest to o wiele łatwiejsze rozwiązanie niż wszystkie inne odpowiedzi.
BBlackwo 21.04.16
To najlepsza odpowiedź, która również działała dla mnie. Ale w moim przypadku w ramce „inline-flex” działało dla mnie lepiej. a do obrazu w środku dodałem: „vertical-align: middle”.
Sophie Cooperman,
22

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

Yeodave
źródło
Widziałem różne metody, ale ta była dla mnie nowa (nawet w 2013 roku).
Mike Ebert,
Lepsze niż umieszczenie obrazu wewnątrz stołu tylko po to, aby go wyśrodkować.
Jonats
3
wyświetl: komórka tabeli nie zawsze ma odpowiedni rozmiar, jeśli chcesz, aby szerokość była równa 100%
Redtopia
1
Co to jest „ PI”?
Peter Mortensen
18

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>

Santosh Khalse
źródło
14

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.

Benjamin Udink ten Cate
źródło
Bardzo fajne rozwiązanie, jednak spodziewam się, że niektóre obrazy będą większe niż pojemnik, i w tym przypadku planowałem użyć na nich maksymalnej wysokości / maksymalnej szerokości. Jakiś sposób to zrobić z obrazami w tle?
Arnaud Le Blanc
to nie jest „element .frame”, to „div z klasą .frame”
JGallardo 17.10.16
Jeśli wysokość obrazu nie przekracza wysokości ramki div, jest to najlepsze i najprostsze rozwiązanie ...
efirat
13

Wyobraź sobie, że masz

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

I css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
fdrv
źródło
Uau! Flex naprawdę rulzzzz! Dziękuję Ci!
Pedro Ferreira
użyj osłony dopasowanej do obiektu, jeśli chcesz, aby dziecko zajmowało pełną szerokość elementu nadrzędnego i nadal było wyrównane pionowo do środka. Zobacz css-tricks.com/snippets/css/a-guide-to-flexbox, aby przenieść obraz nadrzędny za pomocą flex-box
mattdlockyer
11

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";
})
Joseph Marikle
źródło
Miły. Czy jest jakaś szansa na rozwiązanie czysto css?
Arnaud Le Blanc
Niestety nie, chyba że chcesz użyć tabel lub upuścić kompatybilność ze starszymi wersjami IE. :( Gdybyś wiedział dokładnie rozmiar zdjęć przed ręką byłoby inaczej, ale nie bez tego nie jest możliwe z CSS sam.
Joseph Marikle
@Joseph Jak by to naprawić za pomocą tabel?
Benjamin Udink ten Cate,
@Benjamin Udink Ten Cate Za bałagan, ale można to zrobić w ten sposób: jsfiddle.net/DZ8vW/2 (to nie jest zalecane, ale powinno działać)
Joseph Marikle
1
Cóż, idealnie pasuje do potrzeb arnauds. Bez JS, tylko CSS i HTML.
Benjamin Udink ten Cate
11

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");
}
Webars
źródło
Świetny. Jakiś hack dla IE7, który uniknąłby javascript?
Arnaud Le Blanc
Nie jestem pewien, ale może wyrażenia css pomogłyby. Ale są też javascript. Jedyna różnica polega na tym, że piszesz je w plikach css, a nie w js.
Webars
Tak, fajny pomysł. Byłoby to łatwiejsze w zarządzaniu (skrypt jest uruchamiany automatycznie w razie potrzeby), a ponieważ powinien to być IE7, jest w porządku.
Arnaud Le Blanc,
7

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;
}
Ilya Lysenko
źródło
7

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

anglimasS
źródło
tylko ie7, wystarczy wstawić wysokość linii: 25px;
anglimasS
1
wydaje się, że nie jest poprawnie wyrównany nawet w Firefoxie i Chrome ( jsfiddle.net/4RPFa/19 )
Arnaud Le Blanc
7

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

sandeep
źródło
2
Nie działa (przynajmniej w przeglądarce Firefox). W przypadku brakujących cytatów jest to dozwolone w HTML5 (nie wiem jednak, który doctype jest używany w jsfiddle)
Arnaud Le Blanc
7

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;
}
slava
źródło
Niestety IE8 +. W porządku dla mnie, ale może nie dla innych.
TheCarver
zauważ także, że display:table-cell;nie akceptuje% jako szerokości
Mutmatt
7

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.

Sam
źródło
6

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.

DOCTYPE HTML
źródło
6

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

Wpisz opis zdjęcia tutaj

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>

juliangonzalez
źródło
4

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…

feeela
źródło
3

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>
algreat
źródło
w rzeczywistości „pozycja: naprawiona” na obrazie działała dla mnie, gdy byłem sfrustrowany licznymi fałszywymi odpowiedziami ludzi sugerującymi metodę komórkową, która nie działała w mojej pracy. Dzięki metodzie sugerowanej przez algreat nie potrzebujesz również dodatkowego pojemnika.
Vasilios Paspalas
2

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;
 }
Masoumeh Karvar
źródło
1

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> 

Alireza
źródło
0

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%;
}
svnm
źródło
0

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;
}
Kumar
źródło
0

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.

th3pirat3
źródło
0

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>

mariusfv
źródło