HTML:Wie richtet man ein HTML-Element vertikal in der Mitte aus?
<th class="someCSS">Text</th>
CSS:
.someCSS {
vertical-align: middle;
}
Dieser Code funktioniert nicht. Es richtet das Element nicht vertikal in der Mitte aus. Wie mache ich das?
In diesem Fall können Sie mit Flexbox arbeiten müssen, ich denke, weil Sie Ihr Text ein Wort oder 500 sein kann, und es wird immer in der Mitte der Seite
Sie einen div um Ihren Text bleiben und dann Sie tun, was ich
body{
margin:0px;
}
.test{
display:flex;
/*justify-content:center;*//*to put in the center of the screen*/
align-items:center;
width:100%;
height:100vh;
}<div class="test">
<th class="someCSS">Text</th>
</div>@Vinit Khandelwal hoffe, das funktioniert für Sie? – DanyCode
Sie buchen die CSS calc() Funktion zu arbeiten, um den Mittelpunkt des enthaltenden Elements verwenden können und dann abziehen Hälfte die Höhe des Elements, das Sie zentrieren möchten.
.container {
height: 100vh;
}
.element-to-align{
position: relative;
top: calc(50% - 50px);
height:100px;
width: 100px;
}
<body>
<div class="container">
<div class="element-to-align"></div>
</div>
</body>
Voll Code unten:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
height: 100vh;
}
.element-to-align{
position: relative;
top: calc(50% - 50px);
height:100px;
width: 100px;
border: red dotted 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="element-to-align"></div>
</div>
</body>
</html>
Ich habe diesen Code Buddy versucht. Es funktioniert nicht –
Ich habe meinen Beitrag bearbeitet, um Ihnen zu zeigen, dass es funktioniert. Sie müssen sicherstellen, dass zwischen dem '-' Zeichen und den Einheiten in der 'calc()' Funktion ein Leerzeichen steht. –
Lassen Sie mich die Frage auf andere Weise stellen. Hier ist, was ich in der UI erreichen möchte: Text in den Zellen der Tabelle, um vertikal innerhalb der Zelle zu sein. –
<style>
#txt{
vertical-align: middle;
height: 190px;
}
</style>
<table border="1">
<tr>
<th id="txt">Some Text</th>
</tr>
</table>
Das Attribut 'valign' auf dem Element 'tr' ist veraltet. Verwenden Sie stattdessen CSS. – Oriol
Versuchen Sie, Ihrer Zelle etwas Höhe zu geben –
Versuchen 'text-align mit: center;'. – Lex
Was suchen Sie in der Mitte der horizontalen Linie? oder in der Mitte des Bildschirms oder in der Mitte der Vertikalen? – DanyCode
Es hilft nicht. Textausrichtung: Mitte; richtet das Element horizontal in der Mitte aus, nicht vertikal in der Mitte. –