Ich versuche, den Tab-Inhalt vertikal zu zentrieren, aber wenn ich den CSS-Code display:inline-flex
hinzufüge, wird der horizontale Textauszug nicht mehr angezeigt.
Wie kann ich für jede meiner Registerkarten beide Textausrichtungen x und y vornehmen?
* { box-sizing:border-box; }
#leftFrame {
background-color:green;
position:absolute;
left:0;
right:60%;
top:0;
bottom:0;
}
#leftFrame #tabs {
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
height:25%;
}
#leftFrame #tabs div {
border:2px solid black;
position:static;
float:left;
width:50%;
height:100%;
text-align:center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
transform
translateX
translateY
:_/Beispiel hier / Vollbild Beispiel
In unterstützten Browsern (die meisten von ihnen) können Sie top: 50%
left: 50%
in Kombination mit translateX(-50%) translateY(-50%)
verwenden, um das Element dynamisch vertikal/horizontal zu zentrieren.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
_/Beispiel hier / Vollbild Beispiel
Setzen Sie in unterstützten Browsern die display
des Zielelements auf flex
und verwenden Sie align-items: center
für die vertikale Zentrierung und justify-content: center
für die horizontale Zentrierung. Vergessen Sie nicht, Herstellerpräfixe für zusätzliche Browserunterstützung hinzuzufügen ( siehe Beispiel ).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
table-cell
vertical-align: middle
:_/Beispiel hier / Vollbild Beispiel
In einigen Fällen müssen Sie sicherstellen, dass die Höhe des html
body
-Elements auf 100%
eingestellt ist.
Setzen Sie für vertikale Ausrichtung width
/height
des übergeordneten Elements auf 100%
und fügen Sie display: table
hinzu. Ändern Sie dann für das untergeordnete Element display
in table-cell
und fügen Sie vertical-align: middle
hinzu.
Für die horizontale Zentrierung können Sie entweder text-align: center
hinzufügen, um den Text und andere untergeordnete inline
-Elemente zu zentrieren. Alternativ können Sie margin: 0 auto
verwenden, vorausgesetzt das Element ist block
-Ebene.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
50%
von oben mit Verschiebung:_/Beispiel hier / Vollbild Beispiel
Bei diesem Ansatz wird davon ausgegangen, dass der Text eine bekannte Höhe hat - in diesem Fall 18px
. Positionieren Sie einfach das Element 50%
relativ zum übergeordneten Element von oben. Verwenden Sie einen negativen margin-top
-Wert, der der Hälfte der bekannten Höhe des Elements entspricht, in diesem Fall - -9px
.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
line-height
-Methode (am wenigsten flexibel - nicht empfohlen):In einigen Fällen hat das übergeordnete Element eine feste Höhe. Für die vertikale Zentrierung müssen Sie lediglich einen line-height
-Wert für das untergeordnete Element festlegen, der der festen Höhe des übergeordneten Elements entspricht.
Obwohl diese Lösung in einigen Fällen funktionieren wird, ist es erwähnenswert, dass sie nicht funktioniert, wenn mehrere Textzeilen vorhanden sind - wie hier .
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
Wenn CSS3 eine Option ist (oder Sie einen Fallback haben), können Sie transform verwenden:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
Im Gegensatz zum ersten Ansatz möchten Sie links nicht verwenden: 50% bei der negativen Übersetzung, da in IE9 + ein Überlauffehler vorliegt. Verwenden Sie einen positiven rechten Wert, und Sie sehen keine horizontalen Bildlaufleisten.
Die beste Möglichkeit, um eine Box vertikal und horizontal zu zentrieren, besteht darin, zwei Container zu verwenden:
display: table;
habendisplay: table-cell;
habenvertical-align: middle;
habentext-align: center;
habendisplay: inline-block;
habenbody {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Siehe auch this Fiddle !
Um Ihren Inhalt in der Mitte Ihrer Seite zu zentrieren, fügen Sie Ihrem Outher-Container Folgendes hinzu:
position : absolute;
width: 100%;
height: 100%;
Hier ist eine Demo dafür:
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Siehe auch this Fiddle !
Die einfachste und sauberste Lösung für mich ist die Verwendung der CSS3-Eigenschaft "transform":
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Das erste Kind wird vertikal und horizontal in der Mitte ausgerichtet
So verwenden Sie 2 einfache Flex-Eigenschaften, um n divs auf der 2-Achse zu zentrieren:
align-items: center
zentriert die Blöcke vertikaljustify-content: space-around
verteilt den freien horizontalen Raum um die divsbody {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</div>
Um ein Element vertikal und horizontal zu zentrieren, können wir auch die unten genannten Eigenschaften verwenden.
Diese CSS-Eigenschaft aligns-items vertical und akzeptiert die folgenden Werte:
flex-start : Elemente werden an der Oberseite des Containers ausgerichtet.
flex-end : Elemente werden am Boden des Containers ausgerichtet.
center : Elemente werden in der vertikalen Mitte des Containers ausgerichtet.
Baseline : Elemente werden an der Baseline des Containers angezeigt.
stretch : Die Artikel werden an den Behälter angepasst.
Diese CSS-Eigenschaft justify-content , die Elemente horizontal ausrichtet und die folgenden Werte akzeptiert:
flex-start : Elemente werden an der linken Seite des Containers ausgerichtet.
flex-end : Elemente werden auf der rechten Seite des Containers ausgerichtet.
center : Elemente werden in der Mitte des Containers ausgerichtet.
Abstand zwischen : Elemente werden mit gleichem Abstand angezeigt.
space-around : Elemente werden mit gleichem Abstand um sie herum angezeigt.
Führen Sie dieses Code-Snippet aus und sehen Sie ein vertikal und horizontal ausgerichtetes div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
um das Div auf einer Seite zu zentrieren check the fiddle link
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Update Eine andere Option ist die Verwendung der Flexbox check the fiddle link
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Ein anderer Ansatz ist die Verwendung der Tabelle:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Unten finden Sie den Flex-Box-Ansatz, um das gewünschte Ergebnis zu erzielen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
Grid-CSS-Ansatz
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>
Der einfachste Weg, ein Div sowohl vertikal als auch horizontal zu zentrieren, ist der folgende:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
Ein weiteres Beispiel :
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Einfach! Verwenden Sie Display-Flex auf Container und Rand automatisch auf Text !!!!
#hood{
width : 300px;
height: 100px;
border: solid 1px #333333;
display: flex;
}
#hood span{
margin: auto
}
<html>
<head></head>
<body>
<div id="hood">
<span> I Am Centered</span>
</div>
</body>
</html>
Demo: https://jsfiddle.net/ay95f08g/
Getestet: Safari, Chrome, Firefox und Opera auf MacOs Mojave. (alles letzte Aktualisierung am 25. Februar 2019)
Dies erreichen Sie mit CSS (Ihrem Element display:inline-grid
+ grid-auto-flow: row;
). Raster und Flex Box (übergeordnetes Element display:flex;
).
Siehe unten
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
Machen Sie einfach oben, unten, links und rechts auf 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>