vertical align middle in
I want to keep the height of #abc
div
na 50px
i tekst wyrównać pionowo w środku div
.
body{
padding: 0;
margin: 0;
margin: 0px auto;
}
#main{
position: relative;
background-color:blue;
width:500px;
height:500px;
}
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
}
<div id="main">
<div id="abc">
asdfasdfafasdfasdf
</div>
</div>
11 answers
Możesz użyć line-height: 50px;
, nie potrzebujesz vertical-align: middle;
tam.
Demo
Powyższe nie powiedzie się, jeśli masz wiele wierszy, więc w takim przypadku możesz zawinąć swój tekst za pomocą span
, a następnie użyć display: table-cell;
i display: table;
wraz z vertical-align: middle;
, nie zapomnij również użyć width: 100%;
dla #abc
Demo
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
Innym rozwiązaniem, o którym tu myślę, jest użycie transform
właściwości z translateY()
gdzie Y
oczywiście oznacza oś Y. To całkiem proste. naprzód... Wszystko, co musisz zrobić, to ustawić pozycję elementów na absolute
, a następnie pozycję 50%
z top
i przetłumaczyć z jego osi z ujemnym -50%
div {
height: 100px;
width: 100px;
background-color: tomato;
position: relative;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Demo
Zauważ, że nie będzie to obsługiwane w starszych przeglądarkach, na przykład IE8, ale możesz utworzyć IE9 i inne starsze wersje przeglądarek Chrome i Firefox, używając odpowiednio prefiksów -ms, -moz
i -webkit
.
Aby uzyskać więcej informacji na temat transform
, możesz znaleźć 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
2016-05-23 10:14:04
To proste: daj rodzicowi div to:
display: table;
I daj dziecku div(y) to:
display: table-cell;
vertical-align: middle;
To jest to!
.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
padding-left: 20px;
}
<div class="parent">
<div class="child">
Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test
</div>
<div class="child">
Test Test Test <br/> Test Test Test <br/> Test Test Test
</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
2017-10-14 14:06:52
Stare pytanie, ale obecnie CSS3 sprawia, że wyrównanie pionowe jest naprawdę proste !
Wystarczy dodać do #abc
następujący css:
display:flex;
align-items:center;
Original question demo updated
Prosty Przykład:
.vertical-align-content {
background-color:#f18c16;
height:150px;
display:flex;
align-items:center;
/* Uncomment next line to get horizontal align also */
/* justify-content:center; */
}
<div class="vertical-align-content">
Hodor!
</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-06-19 19:21:56
Znalazłem takie rozwiązanie przez Sebastiana Ekström. Jest szybki, brudny i działa naprawdę dobrze. Nawet jeśli nie znasz wzrostu rodzica:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Przeczytaj cały artykuł 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
2014-11-19 22:43:35
Możesz użyć wysokości linii a big jako wysokości div.
Ale dla mnie najlepszym rozwiązaniem jest to --> position:relative; top:50%; transform:translate(0,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
2015-01-13 09:00:33
A może dodasz line-height
?
#abc{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
background-color:#0F0;
height:50px;
vertical-align:middle;
line-height: 45px;
}
Lub padding
na #abc
. to jest wynik z padding
Update
Dodaj swój css:
#abc img{
vertical-align: middle;
}
Wynik . Mam nadzieję, że tego szukasz.
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-09-06 03:25:41
div {
height:200px;
text-align: center;
padding: 2px;
border: 1px solid #000;
background-color: green;
}
.text-align-center {
display: flex;
align-items: center;
justify-content: center;
}
<div class="text-align-center"> Align center</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
2019-06-21 12:14:59
Spróbuj tego:
.main_div{
display: table;
width: 100%;
}
.cells {
display: table-cell;
vertical-align: middle;
}
Inna metoda centrowania div:
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50px;
height: 100px;
margin: auto;
}
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-03-16 08:44:34
Ten kod jest dla pionowego środkowego i poziomego Center Align bez określenia stałej wysokości:
.parent-class-name {
position: relative;
}
.className {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-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
2019-10-31 09:55:19
Użyj właściwości CSS translateY, aby wyśrodkować tekst pionowo w kontenerze
<style>
.centertext{
position: relative;
top: 50%;
transform: translateY(40%);
}
</style>
A następnie zastosuj go do swojego div
<div class="centertext">
<font style="color:white; font-size:20px;"> Your Text Here </font>
</div>
Dostosuj procent tłumaczenia do swoich potrzeb. Mam nadzieję, że to pomoże
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
2019-02-17 19:18:50
.container {
height: 200px;
position: relative;
border: 3px solid green;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>
<div class="container">
<div class="center">
<p>I am vertically and horizontally centered.</p>
</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
2020-12-22 21:24:33