Wie div vertikal in der Mitte ausrichten?

Ich habe diese Zeile mit Bootstrap-3 erstellt:Wie div vertikal in der Mitte ausrichten?

<div class="cart"> 
<div class="row border"> 
    <div class="col-md-8 desc pad itemsheight"> 
    <div class="col-md-12"> 
     <!-- react-text: 141 -->Docos 
     <!-- /react-text --> 
     <!-- react-text: 142 -->channel package 
     <!-- /react-text --> 
    </div> 
    <div class="col-md-12 small"><a href="">Change</a> 
     <!-- react-text: 145 -->| 
     <!-- /react-text --><a href="">Remove</a></div> 
    </div> 
    <div class="col-md-2 desc grey pad itemsheight"></div> 
    <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div> 
</div> 
    </div>

Das Problem ist, dass der Text nicht in der Mitte ausgerichtet ist vertikal ausgerichtet. Ich habe versucht, vertikale Ausrichtung zu verwenden, funktioniert aber nicht? Hier ist ein weiteres Beispiel: http://codepen.io/gekkerkanniet/pen/jVKoyR

Quelle

2016-12-09 bier hier

Welchen Text haben Sie versucht, an vertikaler Mitte auszurichten? –

Die linke ein Paket Text mit Links darunter –

I flex-Display vertikal ausrichten verwendet, um die Inhalte.

.vCenterItems { 
    display: flex; 
    align-items: center; 
}

Auch Höhe von jedem einzelnen Elemente entfernt und nur auf Elternelement angewendet. Dies wird einfacher sein, die Höhe zu ändern.

See it in action

Quelle

2016-12-09 06:44:09

Große Antwort Danke –

dies versuchen, kann dies helfen Ihnen

/*************Cart******************/ 
 
.center-block { 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    display:block; 
 
} 
 
// in case your dealing with a inline element apply this to the parent 
 
.text-center { 
 
    text-align:center 
 
} 
 
.children{ 
 
    
 
    
 
    position: relative; 
 
    top: 35%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.cart .pad { 
 
    margin-top: 8px; 
 
    padding: 2px; 
 
} 
 
.cart .padheader { 
 
    padding: 17px; 
 
} 
 
.cart .border { 
 
    border: solid 0.5px; 
 
} 
 

 
.cart .right { 
 
    text-align: right; 
 
} 
 
.cart .costs { 
 
    padding: 2px; 
 
    margin-top: 10px; 
 
} 
 
.cart .medium { 
 
    font-size: 24px; 
 
    line-height: 53px; 
 
} 
 
.cart .small { 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
} 
 
.cart .itemsheaderheight { 
 
    height: 68px; 
 
} 
 
.cart .itemsheight { 
 
    height: 97px; 
 
} 
 
.cart .space { 
 
    padding: 17px; 
 
} 
 
.cart .grey { 
 
    background-color: #f7f7f7; 
 
} 
 
.cart .yourorder { 
 
    font-family: "Helvetica"; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
    text-align: left; 
 
    color: #333333; 
 
} 
 
.cart .price { 
 
    font-family: Helvetica; 
 
    font-size: 40px; 
 
} 
 
.cart .desc { 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 
.cart .border-bottom { 
 
    border-bottom: lightgray solid 0.5px; 
 
} 
 
.cart .border-top { 
 
    border-top: lightgray solid 0.5px; 
 
} 
 
.cart .collapse { 
 
    display: none; 
 
} 
 
.cart .collapse.in { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>A Pen by Derk Ingen</title> 
 
    
 
    
 
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> 
 

 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
    <div class="cart"> 
 
<div class="row border"> 
 
    <div class="col-md-8 desc pad itemsheight center-block"> 
 
    <div class="col-md-12 text-center children"> 
 
     <!-- react-text: 141 -->Docos 
 
     <!-- /react-text --> 
 
     <!-- react-text: 142 -->channel package 
 
     <!-- /react-text --> 
 
    </div> 
 
    <div class="col-md-12 small text-center children"><a href="">Change</a> 
 
     <!-- react-text: 145 -->| 
 
     <!-- /react-text --><a href="">Remove</a></div> 
 
    </div> 
 
    <div class="col-md-2 desc grey pad itemsheight"></div> 
 
    <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div> 
 
</div> 
 
    </div> 
 
    
 
    
 
</body> 
 
</html>

Quelle

2016-12-09 06:24:23

Sie können mit CSS-Eigenschaft display: table zu Eltern und display: table-cell auf das Kind versuchen, wo wir den Inhalt erreichen kann vertikal Mitte auszurichten und es auch einen Browser compatablity haben.

Quelle

2016-12-09 06:57:16

Wie div vertikal in der Mitte ausrichten?

Antwort

Verwandte Themen