CSS függőlegesen középre igazítás?
válasza:<div>
<span>Szöveg</span>
</div>
div {
position: relative;
min-height: 100px;
}
div span {
position: relative;
display: inline-block;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Hali! Bocsi, de nem igazán sikerült. Valami ilyesmire gondoltam, hogy a szöveg középen legyen:
<div>
Szöveg
</div>
html, body {
height: 100%;
width: 100%;
}
div {
height: 10%;
background-color: red;
}
Tehát a piros rész közepén. Ha átméretezem elmozdul.
Valamit elronthattam, most működik:
div {
height: 10%;
background-color: red;
}
div span {
position: relative;
display: inline-block;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
transform: translate(0, -50%);
}
Nagyon köszönöm! :)
válasza: válasza:Nem én pontoztam le, de mutatok egy másik megoldást:
<div style="display: table; height: X%">
<div style="display: table-cell; vertical-align: middle">
szöveg
</div>
</div>
Működés közben: [link]
válasza:Igen, így is lehet, csak ez táblázat cellát csinál a szövegből, amit már nem lehet inline elemként formázni, csak plusz egy div/span-el.
Ezen kívül van még a flexbox-os megoldás...
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!