Wyrównanie tekstu w pionie obok obrazu?
Dlaczego vertical-align: middle
nie działa? A jednak, vertical-align: top
Czy działa.
<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
20 answers
W tym przypadku jest to dość proste: zastosuj pionowe wyrównanie do obrazu. Ponieważ wszystko jest w jednej linii, tak naprawdę jest to obraz, który chcesz wyrównać, a nie tekst.
<!-- 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>
Testowany w FF3.
Teraz możesz używać flexbox dla tego typu układów.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-26 12:58:07
Oto kilka prostych technik dla vertical-align:
One-line vertical-align: middle
To jest proste: Ustaw wysokość linii elementu tekstowego na równą wysokości kontenera
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align: bottom
Bezwzględnie Ustaw wewnętrzny div względem jego pojemnika
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align: middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Jeśli musisz obsługiwać starożytne wersje IE
Aby to zadziałało poprawnie na całej planszy, będziesz musiał trochę zhakować CSS. Na szczęście jest błąd IE, który działa na naszą korzyść. Ustawienie top:50%
na kontenerze i top:-50%
na wewnętrznym div, można osiągnąć ten sam wynik. Możemy połączyć te dwa za pomocą innej funkcji IE nie obsługuje: zaawansowane selektory CSS.
<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>
Zmienna wysokość kontenera vertical-align: middle
To rozwiązanie wymaga nieco bardziej nowoczesnej przeglądarki niż inne rozwiązania, ponieważ korzysta z właściwości transform: translateY
. ( http://caniuse.com/#feat=transforms2d )
Zastosowanie następujących 3 linii CSS do elementu wyśrodkuje go pionowo wewnątrz elementu nadrzędnego, niezależnie od wysokości elementu nadrzędnego:
position: relative;
top: 50%;
transform: translateY(-50%);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-02 10:25:31
Zmień swoje div
W elastyczny kontener:
div {display:flex;}
Teraz istnieją dwie metody wyśrodkowania wyrównań dla całej zawartości:
Metoda 1:
div {align-items:center;}
Metoda 2:
div * {margin-top:auto; margin-bottom:auto;}
Wypróbuj różne wartości szerokości i wysokości na img
i różne wartości rozmiaru czcionki na span
, a zobaczysz, że zawsze pozostają w środku kontenera.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-24 07:39:30
Musisz zastosować vertical-align: middle
do obu elementów, aby były idealnie wyśrodkowane.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
Zaakceptowana odpowiedź Wyśrodkowuje ikonę około połowy wysokości x tekstu obok (zgodnie z definicją w specyfikacji CSS). Co może być wystarczająco dobre, ale może wyglądać trochę nie tak, jeśli tekst ma ascendery lub descendery wyróżniające się tylko na górze lub na dole: {]}
Po lewej, tekst nie jest wyrównany, po prawej jest tak, jak pokazano powyżej. Demo na żywo można znaleźć w tym artykuł o vertical-align.
Czy ktoś mówił, dlaczego vertical-align: top
działa w scenariuszu? obrazek w pytaniu jest prawdopodobnie wyższy od tekstu i tym samym określa górną krawędź pola linii. vertical-align: top
na elemencie span następnie umieszcza go na górze pola linii.
Główną różnicą w zachowaniu pomiędzy vertical-align: middle
i top
jest to, że pierwsze przesuwa elementy względem linii bazowej pudełka (która jest umieszczona wszędzie tam, gdzie potrzebne, aby spełnić wszystkie wyrównania pionowe, a tym samym czuje się raczej nieprzewidywalne ) i drugi w stosunku do zewnętrznych granic pola linii (co jest bardziej namacalne).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:35
Technika użyta w zaakceptowanej odpowiedzi działa tylko w przypadku tekstu jednowierszowego ( demo ), ale nie tekstu wielowierszowego (demo ) - Jak tam zaznaczono.
Jeśli ktoś musi wyśrodkować pionowo tekst z wieloma liniami do obrazu, oto kilka sposobów (Metody 1 i 2 zainspirowane TYM artykułem CSS-triki )
Metoda #1: tabele CSS(FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Metoda #2: Pseudo element na kontenerze (FIDDLE) (IE8+)
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 */
}
Metoda # 3: Flexbox (FIDDLE) (caniuse )
CSS (Powyższy tekst zawiera przedrostki vendora):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-07 23:17:02
Ten kod działa zarówno w IE jak i FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:48:20
Ponieważ musisz ustawić line-height
Na wysokość div, aby to działało
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:40:05
Zasadniczo, będziesz musiał zejść do CSS3.
-moz-box-align: center;
-webkit-box-align: center;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:42:25
Dla przypomnienia, wyrównanie "poleceń" nie powinno działać na SPAN, ponieważ jest to znacznik in-line, a nie znacznik block-level. Rzeczy takie jak wyrównanie, margines, wypełnienie itp.nie będą działać na znaczniku in-line, ponieważ punktem in-line nie jest zakłócanie przepływu tekstu.
CSS dzieli znaczniki HTML na dwie grupy: in-line i block-level. Wyszukaj "css block vs inline" i świetny artykuł pokazuje w górę...
Http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(zrozumienie podstawowych zasad CSS jest kluczem do tego, aby nie być tak denerwującym)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-18 13:24:05
Kolejną rzeczą, którą możesz zrobić, to ustawić line-height
tekst na rozmiar obrazów w <div>
. Następnie Ustaw obrazy na vertical-align: middle;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:45:41
Użyj line-height:30px
dla zakresu, aby tekst był wyrównany z obrazkiem:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-20 23:50:12
Nie widziałem jeszcze rozwiązania z margin
w żadnej z tych odpowiedzi, więc oto moje rozwiązanie tego problemu.
To rozwiązanie działa tylko wtedy, gdy znasz szerokość obrazu.
HTML
<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>
CSS
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-10 11:26:02
background:url(../images/red_bullet.jpg) left 3px no-repeat;
Generalnie używam 3px zamiast top
. Zwiększając/zmniejszając tę wartość, obraz można zmienić na wymaganą wysokość.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:48:04
Zapisz te właściwości span
span{
display:inline-block;
vertical-align:middle;
}
Użyj display:inline-block;
Gdy używasz właściwości vertical-align
.Są to właściwości assosiated
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-08 06:46:32
Na przycisku w jQuery mobile, na przykład, można go nieco dostosować, stosując ten styl do obrazu:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-17 21:50:58
Możesz ustawić obraz jako inline element
używając właściwości display
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-30 14:54:55
Rozwiązanie wieloliniowe:
<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 -->
Działa we wszystkich przeglądarkach i ie9 +
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-21 15:04:56
To może być mylące, zgadzam się. Spróbuj skorzystać z funkcji tabeli. Używam tej prostej sztuczki CSS do pozycjonowania modali na środku strony. Posiada duże wsparcie dla przeglądarki:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
I część CSS:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Zauważ, że musisz stylować i dostosowywać rozmiar kontenera obrazu i tabeli, aby działał tak, jak chcesz. Smacznego.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-06 02:12:31
Po pierwsze inline CSS w ogóle nie jest zalecany, to naprawdę bałagan w HTML.
Aby wyrównać obraz i rozpiętość, możesz po prostu zrobić 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-10 00:24:40
Prawdopodobnie tego chcesz:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Jak sugerowali inni, spróbuj vertical-align
na obrazku:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS nie jest irytujący. Po prostu nie czytasz dokumentacji . ; P
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-28 21:10:00