Vertical Ausrichtung Text in einem Div in Bezug auf Zeilen

Ich versuche, den Text "Adresse" in linken div vertikal auszurichten. Aber ich kann es nicht. HierVertical Ausrichtung Text in einem Div in Bezug auf Zeilen

ist der Code,

div.row { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.centre { 
 
    display: block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background: yellow; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="row"> 
 
     <!--nested row one--> 
 
     <div class="col-md-6"> 
 
      <label>Street</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="stname"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row two--> 
 
     <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="lmark"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row three--> 
 
     <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--row end--> 
 
</div>

Was mache ich falsch. Ich bin mit bootsrap 3.

Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (Ansicht Plunker in Vollbild)

Ich versuche ähnliches Ergebnis wie dieses zu haben. Die farbigen Ränder dienen nur zur Darstellung .

Quelle

2017-09-22 gowtham raj j

Bitte fügen Sie Bild mit den erforderlichen Design. –

Das Adressfeld sollte vertikal in Bezug auf die drei verschachtelten Zeilen links ausgerichtet sein. Bitte sehen Sie sich die Ausgabe von Plunker in einem separaten Fenster an, die Adresse befindet sich oben auf der Seite und ist nicht vertikal ausgerichtet. –

Mögliches Duplikat von [Wie zentriere ich Text vertikal mit CSS?] (Https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) –

ich die linke div positionierte unter Verwendung von oben: 50% (nimmt die Höhe des Mutterunternehmens) und unter Verwendung von translateY dann, die von der Höhe nimmt das aktuelle Element.

Da die relative Positionierung nicht% Werte angenommen hat, habe ich absolut verwendet. Wenn Sie aber absolut angeben, wird das div aus dem Dokumentfluss entfernt. Daher wird "left" für das rechte Geschwister mit der Breite des linken Geschwisters verwendet.

.parent{ 
    position: relative; 
} 
.centre{ 
    background: yellow; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.right{ 
    left: 25%; 
    /* width of left sibling, since col-md-3 is 25%*/ 
    background: lightgreen; 
}

Plnkr Link (mit Bootstrap) oder JsFiddle (ohne Bootstrap)

Ergebnis:

Quelle

2017-12-25 22:20:30

Sie setzen die Stile in die Mitte div, stattdessen sollte

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    div.row div{ 
 
     border: 1px solid black; 
 
     padding: 10px; 
 
    } 
 
    .centre label{ 
 
     display: block; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     background: yellow; 
 
     height: 100%; 
 
     padding:5px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="row"><!--nested row one--> 
 
      <div class="col-md-6"> 
 
      <label>Street</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="stname"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row two--> 
 
      <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="lmark"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row three--> 
 
      <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div><!--row end--> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-09-22 13:38:24 codegeek

-1

Ihre vertical-align:middle nicht funktioniert, das Etikett im Zentrum div sein, weil Elemente mit display: block können nicht auf diese Weise zentriert werden. Eine einfache Alternative wäre, display: flex zu verwenden.

Hier ist ein Ausschnitt der Art und Weise Anzeige zu demonstrieren: flex verwendet werden kann, so ziemlich alles zum Zentrum:

div.row div{ 
 
     border: 1px solid black; 
 
     padding: 10px; 
 
    } 
 
    .centre{ 
 
     display: block; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     background: yellow; 
 
     height: 100%; 
 
    } 
 
    .flex { 
 
    display: flex; 
 
    align-items: center; 
 
    }

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="flex"> 
 
     <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="row"><!--nested row one--> 
 
      <div class="col-md-6"> 
 
      <label>Street</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="stname"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row two--> 
 
      <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="lmark"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row three--> 
 
      <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div><!--row end--> 
 
    </div>

EDIT: vielleicht dieses Handbuch könnte für Sie von Interesse sein: Centering in CSS: A Complete Guide

Quelle

2017-09-22 13:46:26 Maharkus

Flex ist eine großartige Alternative. –

Code Pen

Sie können den Offset entfernen und mit dem 12-Grid-System abgleichen.

div.row { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.centre { 
 
    background: yellow; 
 
    top: 60px; 
 
    border: 1px solid blue; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 centre"> 
 
     <label>Address</label> 
 
    </div> 
 

 
    <div class="col-xs-8 col-sm-offset-1" style="border:1px solid green"> 
 
     <!--You can remove style and remove offset and change it to sm-9 --> 
 
     <div class="row"> 
 
     <!--nested row one--> 
 
     <div class="col-xs-6"> 
 
      <label>Street</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="stname"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row two--> 
 
     <div class="col-xs-6"> 
 
      <label>Landmark</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="lmark"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row three--> 
 
     <div class="col-xs-6"> 
 
      <label>Zip code</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="zipcode"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--row end--> 
 
</div>

Wie jetzt, margin-top ist ein Wert von Option zu versuchen.

Quelle

2017-09-22 13:46:57

Hier ist eine Lösung obere Ränder/padding Einstellung auf Spalten dann nicht verschachtelten Cancelling oberen Rand/padding in verschachtelt die:

Plunkr

Relevante CSS:

[class*="col-"] { 
    border: 1px solid black; 
    padding: 10px; 
} 
.row:first-child [class*="col-"] { 
    margin-top: 10px; 
    background-color: lightgreen; 
} 
.row .row:first-child [class*="col-"] { 
    margin-top: -10px; 
    background-color: pink; 
} 
.row .row:not(:first-child) [class*="col-"] { 
    margin-top: 0; 
    background-color: lightblue; 
}

Lösung von @codegeek der vermeidet diese Probleme ist besser imho :)

Quelle

2017-09-22 13:47:45 FelipeAls

Ich versuche nicht, die Spalten zu stylen, sondern die Spalte links vertikal in der Spalte rechts auszurichten. –

Ich benutzte schlechte Formulierung: von _styling columns_ Ich meinte "Einstellung/Aufhebung der oberen Rand/Polsterung" auf ihnen – FelipeAls

können Sie diesen Code in Ihrer CSS-Datei hinzufügen, um vertikale Ausrichtung zu bekommen. aber zuerst müssen Sie eine neue Klasse mit Reihen Klasse hinzufügen

<!DOCTYPE html> 
<html> 

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="script.js"></script> 
    <style> 

    .vertical > div { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 

.vertical > div { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 
    div.row div{ 
     border: 1px solid black; 
     padding: 10px; 
    } 
    .centre label{ 
     display: block; 
     text-align: center; 
     vertical-align: middle; 
     background: yellow; 
     height: 100%; 
     padding:5px; 
    } 
    </style> 
</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row vertical"> 
     <div class="col-md-3 centre"> 
     <label>Address</label> 
     </div> 
     <div class="col-md-6"> 
     <div class="row"><!--nested row one--> 
      <div class="col-md-6"> 
      <label>Street</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="stname"> 
      </div> 
     </div> 
     <div class="row"><!--nested row two--> 
      <div class="col-md-6"> 
      <label>Landmark</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="lmark"> 
      </div> 
     </div> 
     <div class="row"><!--nested row three--> 
      <div class="col-md-6"> 
      <label>Zip code</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="zipcode"> 
      </div> 
     </div> 
     </div> 
    </div><!--row end--> 
    </div> 
</body> 

</html>

Quelle

2017-09-22 13:50:29

Vertical Ausrichtung Text in einem Div in Bezug auf Zeilen

Antwort

Verwandte Themen