Jak mogę wyśrodkować tekst w pionie w dynamicznym polu różnicy wysokości?
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
Jak mogę wyśrodkować znacznik h1 wewnątrz znacznika div, bez względu na Wysokość elementu div? tzn. jeśli użytkownik zmieni wysokość przeglądarki, chcę, aby h1 wyrównał pionowo w środku, zgodnie z nową wysokością.
Dzięki.9 answers
Najlepszym rozwiązaniem, jakie kiedykolwiek spotkałem, jest użycie właściwości display
i ustawienie elementu wrapper jako table
, aby umożliwić użycie vertical-align:middle
na elemencie do wyśrodkowania:
Zobacz też przykład pracy !
HTML
<body>
<div>
<h1>Text</h1>
</div>
</body>
CSS
body {width: 100%; height: 100%;} /* this is just to "view" the div height...*/
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
TESTOWANE NA
Windows XP Professional 2002 Service Pack 3
- Internet Explorer 8.0.6001.18702
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18.0.1025.168 m
Windows 7 Home Edition Service Pack 1
- Internet Explorer 9.0.8112.164211 C
- Opera 11.62
- Firefox 12.0
- Safari 5.1.4
- Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0 [[29]}Chromium 18.0.1025.151 (Developer Build 130497 Linux)
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
2012-06-07 20:42:08
Odpowiedź, którą uważam za najmniej natrętną i najmniej mylącą, wymaga Wstawienia znacznika <span>
przed elementem <h1>
: http://jsfiddle.net/Wexcode/axRxE/
HTML:
<div>
<span></span><h1>Text</h1>
</div>
CSS:
div { text-align: center; /* horizontally center */ }
div span {
height: 100%;
vertical-align: middle;
display: inline-block; }
div h1 {
vertical-align: middle;
display: inline-block; }
Rozszerzenie tej techniki do pionowego wyrównania do wysokości przeglądarki: http://jsfiddle.net/Wexcode/axRxE/1/
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
2012-06-07 21:49:05
Mam najłatwiejsze 3 linie css, które rozwalą twój umysł i będziesz myślał "dlaczego nie pomyślałem o tym początkowo". Użyj tego na elemencie, który chcesz umieścić pionowo, a kontener nadrzędny po prostu dodaj wysokość 100%.
position: relative;
top: 50%;
transform: translateY(-50%);
Pozycja może być względna, absolutna lub stała.
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-08-22 22:43:05
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
</div>
</body>
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
2012-06-07 20:25:26
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #0c0c0c;
}
.object {
background-color: #666666;
height: 350px;
width: 600px;
}
.verticalCenter {
width:600px;
height:350px;
position:absolute;
left:50%;
top:50%;
margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
<div class="verticalCenter">
<div class="object">cetnered</div>
</div>
</body>
</html>
Musisz ustawić wysokość i szerokość w .Klasa verticalCenter taka sama jak Twojego obiektu (div, flash, image, text), który ma być wyśrodkowany. Marginesy muszą być w połowie wysokości i szerokości.
Myślę, że nie ma rozwiązania, jeśli zmienisz ten obiekt dynamicznie. Chyba, że przy pomocy skryptów.
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
2012-06-07 20:30:27
Oto dość proste rozwiązanie. Opiera się głównie na ustawieniu display:table-cell
i wybraniu wyrównania pionowego, takiego jak środek.
HTML:
<div id="vertical">
<p>this text is vertically centered. It's long enough to wrap, and should work for any size chunk of content.</p>
<p>Heck, it even works with multiple items in the middle.</p>
</div>
CSS:
#vertical {
display:table-cell;
vertical-align:middle;
height: 500px;
width: 300px;
}
JSFiddle: http://jsfiddle.net/6Re3E/1/
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
2012-06-07 20:33:19
Istnieje cross (desktop) browser solution aby to zrobić z CSS2 + CSS3 i bez żadnego Javascript.
Działa w
- IE5+
- Gecko (Mozilla, Firefox, Netscape 7)
- Opera 7 +
- Konqueror 3 +
- Przeglądarki Webkit (Safari, Google Chrome) [13]}i wiele więcej (przeglądarki mobilne nie testowane)
Documentation: Vertical Centering in CSS Definitive Solution with Unknown Height:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
przykład Clean jsFiddle: http://jsfiddle.net/WYgsP /
HTML
<div class="outerBox">
<div class="helper">
<div class="boxWithUnknownHeight">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
CSS
.outerBox {
display: table;
height: 400px;
#position: relative; /* ie hack */
overflow: hidden;
border: 1px solid red;
}
.helper {
#position: absolute; /* ie hack */
#top: 50%; /* ie hack */
display: table-cell;
vertical-align: middle;
}
.boxWithUnknownHeight {
#position: relative; /* ie hack */
#top: -50%;
border: 1px solid green
}
To działa, nawet jeśli dodam tekst i linijki-breaki przez Firebug itp.
aby zachować swój CSS czysty od nieprawidłowych CSS-Hacks, polecam użyć komentarze warunkowe dla niego i utworzyć oddzielny CSS z specyficzne dla przeglądarki Kod.
Jak dokładnie działa centrowanie pionowe o nieznanej wysokości i dlaczego: szczegółowy opis
Inne rozwiązania z display: table
i lub display: table-cell
i lub absolutnym pozycjonowaniem tutaj.
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 10:31:15
Używam tabel do wszystkiego. Ja osobiście nie lubię używać display: table
lub czegoś podobnego, gdy istnieje coś, co już istnieje.
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
Używając tej samej metody, możesz zrobić coś takiego dla swojego przypadku:
<div id="container-div" style="position: relative">
<div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
<div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
</div>
</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
2016-11-17 13:57:34
Z mojego punktu widzenia, div
nie jest właściwym wyborem w tym przypadku. Moja propozycja to go for table
and vertical-align
style on it ' s td
S.
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
2012-06-07 20:26:03