De onderstaande code (ook beschikbaar als een demo op JS Fiddle) plaatst de tekst niet in het midden, zoals ik het liefst zou willen. Ik kan geen enkele manier vinden om tekst verticaal te centreren in een div, zelfs niet met het margin-topattribuut. Hoe kan ik dit doen?
<div id="column-content">
<img src="https://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>
#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top:-7px;
vertical-align: middle;
}
Antwoord 1, autoriteit 100%
Maak een container voor uw tekstinhoud, een spanmisschien.
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}<div id="column-content">
<img src="https://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>Antwoord 2, Autoriteit 149%
Andres Ilich heeft het goed. Voor het geval iemand zijn reactie mist …
a.) Als u slechts één regel tekst hebt:
div
{
height: 200px;
line-height: 200px; /* <-- this is what you must define */
}<div>vertically centered text</div>Antwoord 3, Autoriteit 57%
Update 10 april, 2016
FLEXBOXES MOET NU WORDEN GEBRUIKT NAAR Verticaal (of zelfs horizontaal) uitlijnen items.
body {
height: 150px;
border: 5px solid cyan;
font-size: 50px;
display: flex;
align-items: center; /* Vertical center alignment */
justify-content: center; /* Horizontal center alignment */
}MiddleAntwoord 4, Autoriteit 13%
Het geaccepteerde antwoord werkt niet voor tekst met meerdere regel.
Ik heb de JSFiddle om CSS Multiline Tekst verticaal uitlijnen na te tonen zoals uitgelegd hier :
<div id="column-content">
<div>yet another text content that should be centered vertically</div>
</div>
#column-content {
border: 1px solid red;
height: 200px;
width: 100px;
}
div {
display: table-cell;
vertical-align:middle;
text-align: center;
}
Het werkt ook met <br />in “nog een andere …”
Antwoord 5, Autoriteit 5%
Probeer dit:
HTML
<div><span>Text</span></div>
CSS
div {
height: 100px;
}
span {
height: 100px;
display: table-cell;
vertical-align: middle;
}
Antwoord 6, Autoriteit 3%
Om de oplossing van Omar (of Mahendra) nog meer universeel te maken, moet het blok van de code ten opzichte van Firefox worden vervangen door:
/* Firefox */
display: flex;
justify-content: center;
align-items: center;
Het probleem met de code van Omar, anderszins opererend, ontstaat wanneer u het vak in het scherm of in de directe voorouder wilt centreren. Deze centrering gebeurt hetzij door zijn positie in te stellen op
position: relative;of position:static;(niet met positie: absoluut noch vast).
en vervolgens marge: auto; of margin-rechts: auto; Margin-links: Auto;
Onder deze box-centrale uitlijnende omgeving werkt de suggestie van Omar niet. Het werkt ook niet in Internet & Nbsp; Explorer & NBSP; 8 (toch 7,7% marktaandeel). Dus voor internet & nbsp; Explorer & NBSP; 8 (en andere browsers), een oplossing die in andere bovenstaande oplossingen wordt gezien, moet worden overwogen.
Antwoord 7, Autoriteit 3%
Dit is gewoon verondersteld om te werken:
#column-content {
--------
margin-top: auto;
margin-bottom: auto;
}
Ik heb het geprobeerd op je demo.
Antwoord 8
Dit is de eenvoudigste manier om het te doen als u meerdere regels nodig heeft. Wikkel je span‘D-tekst in een andere spanen geef de hoogte op met line-height. De truc voor meerdere lijnen is het opnieuw instellen van de binnenste span‘S line-height.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /* Set height */;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /* Set line height back to normal */
}
Natuurlijk kan de buitenste spaneen divzijn of wat heeft u.
Antwoord 9
Voeg een verticale uitlijnen toe aan het CSS-inhoud #column-content strongook:
#column-content strong {
...
vertical-align: middle;
}
Zie ook je bijgewerkt voorbeeld .
=== update ===
Met een overspanning rond de andere tekst en een andere verticale uitlijnt:
HTML:
... <span>yet another text content that should be centered vertically</span> ...
CSS:
#column-content span {
vertical-align: middle;
}
Zie ook de volgend voorbeeld .
Antwoord 10
Ik weet dat het helemaal stom is en je moet normaal geen tabellen gebruiken bij het maken van tabellen, maar:
Tabelcellen kunnen meerdere lijnen van tekst verticaal gericht en doe dit zelfs standaard. Dus een oplossing die vrij goed werkt, kan zoiets zijn:
HTML:
<div class="box">
<table class="textalignmiddle">
<tr>
<td>lorem ipsum ...</td>
</tr>
</table>
</div>
CSS (laat het tabelitem altijd passen op de DIVE DIV):
.box {
/* For example */
height: 300px;
}
.textalignmiddle {
width: 100%;
height: 100%;
}
Zie hier:
http://www.cssdesk.com/lzpev