Vertikale Mitte ausrichten text ohne lineheight-und table-cell

Habe ich einen Teaser mit einem "toggle"-Animation, wie gesehen werden kann, auf JSFiddle oder unter:

CSS:

.ax {
    height:60px;
    width:150px;
    background:gold;
}
 .caption {
position: absolute;
    left:0;
  top: 35%;
  overflow: hidden;
  right: 0;
  background-color: rgba(24,88,140,0.7);
  width: 100%;
  height: 52px;
  z-index: 2;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  transition: 500ms;
  font-weight: lighter;
  padding: 10px;
  color: #fff;
}

a.link{
  color: #fff;
  overflow: hidden;
  width: 80%;
  margin-bottom: 30px;
  font-weight: lighter;
  font-size: 16px;
  line-height: 22px;
}

 .caption:hover {
  height: 100%;
  top: 0;
}
.box {
    position:relative;    
    width:250px;
    height:200px;
}

/*TABLE CELL METHOD*/

 .caption2 {
     position: absolute;
    left:0;
  top: 35%;
  overflow: hidden;
  right: 0;
  background-color: rgba(24,88,140,0.7);
  width: 100%;
  height: 52px;
  z-index: 2;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -ms-transition: 500ms;
  transition: 500ms;
  font-weight: lighter;
  padding: 10px;
  color: #fff;
    display:table;
   
}
 .caption2:hover {
  height: 100%;
  top: 0;
}
a.link2{
    display:table-cell;
   vertical-align: middle;

  overflow: hidden;
  width: 80%;
  margin-bottom: 30px;
  font-weight: lighter;
  font-size: 16px;
  line-height: 22px;
}

HTML:

<div class="box">
<div class="caption">
<a href="#" class="link">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
</div>
</div><br><br

<br><br>
    table cell method (div.caption2 display:table and a.link display:table-cell + vertical-algin:middle)
    <br><br>
        
<div class="box">
<div class="caption2">
<a class="link2" href="#">Lorem Ipsum blabla bla blahah ipsum lorem blablablahh</a>
<p class="captiontext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
</div>
</div>

Ich ausrichten möchten, den link in der vertikalen Mitte der blauen box. Der link kann eine einzelne Zeile oder zwei Zeilen (bei den meisten), aber es sollte immer vertikal zentriert.
Die CSS-Eigenschaft lineheight funktioniert nicht mit zwei line-links, in der Erwägung, dass die Tabelle (Zelle)-Methode auch nicht funktioniert (siehe oben).

Gibt es eine Möglichkeit, zu zentrieren, sowohl ein-und zwei line-links in meine box?

InformationsquelleAutor Andi | 2015-06-30
  1. 15

    Zu verticly center beliebiges element, die Sie anwenden können, Stil:

    .element
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

    Müssen Sie ersetzen Ihre Zellen in einer Tabelle mit Spalten, um zu replizieren Ihre aktuellen styles. Kredit Sebastian Ekstrom für die Lösung.

    • nicht die Arbeit mit bootstrap-aber :/
    InformationsquelleAutor mac
  2. 21

    Dem display-Typ "Flexbox" kann nützlich sein, für diese. Wenden Sie dieses CSS an die Eltern des Kindes wollen Sie zentriert:

    display: flex;
flex-direction: column;
justify-content: center;
    • nicht die Arbeit mit bootstrap-aber :/
    InformationsquelleAutor Sebastian Olsen
  3. 1

    Andere Möglichkeit ist vertical-align auf pseudoelement:

    https://codepen.io/darxide/pen/xRmYdQ

    <div class="block" style="height: 300px;">
    <div class="centered">
        vertical center
    </div>
</div>


.block:before {
  content: ' ';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}

.centered {
  display: inline-block;
  vertical-align: middle;
}
    • Dies ist so eine seltsame trick. Keine Ahnung warum es funktioniert? Gibt es eine Referenz?
    InformationsquelleAutor Dariusz Majchrzak
Schreibe einen Kommentar