De ce nu't vertical-align: mijloc de munca? Și totuși,
vertical-align: top` nu de lucru.
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
De fapt, în acest caz, se's destul de simplu: se aplică align vertical la imagine. Deoarece's toate într-o singură linie, l's chiar imaginea pe care doriți aliniate, nu textul.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Testat în FF3.
Acum puteți folosi flexbox pentru acest tip de layout.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Iată câteva tehnici simple pentru vertical-align:
Aceasta este ușor: setați linia de înălțime a textului element egal cu cel al recipientului
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Absolut poziția interioară div relativ la container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
În scopul de a obține acest lucru în mod corect peste bord, ai'll trebuie să hack CSS un pic. Din fericire, există un bug IE care lucrează în favoarea noastră. Setarea de sus:50% pe recipient și sus:-50%
pe interior div, puteți obține același rezultat. Putem combina cele două, folosind o altă caracteristică IE nu't suport: avansat CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Această soluție necesită un pic mai mult de browser-ul modern decât alte soluții, ca se face uz de `transforma: translateY de proprietate. (http://caniuse.com/#feat=transforms2d)
Aplicând următoarele 3 linii de CSS la un element va pe verticală centrul termen de părintele său, indiferent de înălțimea elementului părinte:
position: relative;
top: 50%;
transform: translateY(-50%);
Schimba div
într-un flex container:
div {display:flex;}
Acum, există două metode pentru centrul de aliniamente pentru toate conținut:
Metoda 1:
div {align-items:center;}
[DEMO][1]
Metoda 2:
div * {margin-top:auto; margin-bottom:auto;}
[DEMO][2]
Încercați diferite valorile pentru lățime și înălțime pe img
și dimensiunea fontului diferite valori pe span
și'll vedea că rămân mereu în mijlocul containerului.
Trebuie să se aplice vertical-align: middle
pentru ambele elemente au fost centrat perfect.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
De răspunsul acceptat are în centru icoana aproximativ jumătate din x-înălțimea de text de lângă ea (astfel cum sunt definite în CSS specificatiile). Care ar putea fi destul de bun, dar poate arata un pic off, dacă textul a ascendenților sau coboratoare remarcându-se doar la partea de sus sau de jos:
Pe stânga, textul nu este aliniat, pe dreapta este indicată mai sus. Un demo live pot fi găsite în acest articol despre vertical-align](http://christopheraue.net/2014/03/05/vertical-align/#centering-an-icon).
Cineva a vorbit despre ce vertical-align: top
funcționează în scenariu? Imaginea în cauză este, probabil, mai înalt decât textul și astfel se definește marginea de sus a liniei cutie. `vertical-align: top pe elementul span apoi se poziționează în partea de sus a linie de cutie.
Principala diferență de comportament între vertical-align: middle " și " de sus
este că primul se mișcă elemente relative la box's de referință (care este plasat oriunde este nevoie pentru a îndeplini toate verticală aliniamente și, astfel, se simte mai degrabă imprevizibile) și cel de-al doilea relativ la limitele exterioare ale liniei cutie (care este mult mai tangibile).
Tehnica utilizată în răspunsul acceptat funcționează numai pentru o singură linie de text ([demo][1]), dar nu de text multi-linie ([demo][2]) - după cum sa menționat de acolo.
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
CSS (Cele de mai sus vioara conține furnizor prefixe):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Pentru înregistrare, aliniere "comenzi" ar't de lucru pe un INTERVAL, pentru că este un in-line tag-ul, nu o la nivel de bloc tag-ul. Lucruri cum ar fi aliniere, margin, padding, etc câștigat't de lucru pe o linie tag-ul, deoarece punctul de inline nu este de a perturba fluxul de text.
CSS împarte tag-uri HTML în două grupuri: în linie și la nivel de bloc. Căutare "bloc css vs inline" și o mare de articol apare...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Înțelegere de bază CSS principii este o cheie pentru a nu fi destul de enervant)
Am't văzut-o soluție cu "marjă" în oricare dintre aceste răspunsuri, deci, aici este meu soluție la această problemă.
[Această soluție][1] funcționează numai dacă știi lățimea imaginii.
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Puteți seta imaginea ca element inline` folosind "display" proprietate
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Multilinie soluție:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Lucrări în toate browserele și ie9+
Acesta poate fi confuz, sunt de acord. Încercați folosind caracteristici de masă. Eu folosesc acest CSS simplu truc pentru a poziționa modals la centrul de pagină web. Ea are mare sprijin browser-ul:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
și CSS parte:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Rețineți că trebuie să stil și ajusta dimensiunea de imagine și de masă container pentru a face să funcționeze cum doriti. Bucurați-vă.
În primul rând CSS nu este recomandat la toate, chiar strica HTML.
Pentru alinierea imaginii și durata, puteți face pur și simplu vertical-align:middle
.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
Nu sunt sigur de ce nu't face pe navigare's browser-ul, dar am folosi în mod normal un fragment ca acest lucru atunci când încearcă pentru a afișa un antet cu o imagine și un text centrat, sper că vă ajută!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>