Vertikales Ausrichten: nach Element im übergeordneten Container (jsfiddle)

Question

Ich versuche, den Text an der Mitte des übergeordneten Containers auszurichten, aber er richtet sich etwas weiter nach unten als in der Mitte. Hier

ist die Geige: https://jsfiddle.net/xrvo6txq/1/

CSS:

.caret-right { 
    position: relative; 
    display: block; 
} 

.caret-right:after { 
    position: absolute; 
    right: 5%; 
    top: 50%; 
    display: inline-block; 
    vertical-align: middle; 
    transition: .15s; 
    -webkit-transition: .15s; 
    -moz-transition: .15s; 
    font-family: FontAwesome; 
    content: "\f105"; /* fa-angle-right */ 
    font-size: 1.5em; 
} 
.caret-right:hover:after { 
    right: 4%; 
} 

.box { 
    border: 1px solid #ccc; 
    padding: 1em; 
} 
.align-center { 
    text-align: center; 
} 

HTML:

<a class="caret-right" href="#" title="Get Started"> 

    <div class="box"> 

    <p class="align-center">Get started now with <span class="color-theme-a">5 free lessons</span>.</p> 

    <p class="align-center">No credit card needed</p> 

    </div> 

</a> 

Answer 1

hinzufügen transform: translateY(-50%); auf Ihre .caret-right:after Regel:

.caret-right:after { 
    transform: translateY(-50%); 
} 

Dies versetzt die korrekte Schreibweise Ihrer Element 50% seiner Höhe Ihres caret vertikal zentriert:

.caret-right { 
 
    position: relative; 
 
    display: block; 
 
} 
 
.caret-right:after { 
 
    position: absolute; 
 
    right: 5%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    transition: .15s; 
 
    -webkit-transition: .15s; 
 
    -moz-transition: .15s; 
 
    font-family: FontAwesome; 
 
    content: "\f105"; 
 
    /* fa-angle-right */ 
 
    font-size: 1.5em; 
 
} 
 
.caret-right:hover:after { 
 
    right: 4%; 
 
} 
 
.box { 
 
    border: 1px solid #ccc; 
 
    padding: 1em; 
 
} 
 
.align-center { 
 
    text-align: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.css" rel="stylesheet" /> 
 
<a class="caret-right" href="#" title="Get Started"> 
 
    <div class="box"> 
 
    <p class="align-center">Get started now with <span class="color-theme-a">5 free lessons</span>.</p> 
 
    <p class="align-center">No credit card needed</p> 
 
    </div> 
 
</a>

Answer 2

perfekt senkrecht zu den .caret-right:after Zentrieren, lassen Sie die 50% top Wert und fügen Sie den folgenden:

transform: translateY(-50%); 

Answer 3

Eine Alternative zur Verwendung der Eigenschaft CSS3 transform ist die Zuweisung eines spezifischen Werts für die Zeilenhöhe .caret-right und dann u einen negativen oberen Rand bis zur Hälfte der Linienhöhe.

Persönlich bevorzuge ich die transform: translateY(-50%) Regel, aber es ist gut zu wissen, wie man es mit einem alternativen Ansatz macht.

.caret-right { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
.caret-right:after { 
 
    outline: 1px dotted red; 
 
    position: absolute; 
 
    right: 5%; 
 
    top: 50%; 
 
    display: inline-block; 
 
    transition: .15s; 
 
    -webkit-transition: .15s; 
 
    -moz-transition: .15s; 
 
    font-family: FontAwesome; 
 
    content: "\f105"; 
 
    /* fa-angle-right */ 
 
    font-size: 1.5em; 
 
    line-height: 50px; 
 
    margin-top: -25px; 
 

 
} 
 

 
.caret-right:hover:after { 
 
    right: 4%; 
 
} 
 

 
.box { 
 
    border: 1px solid #ccc; 
 
    padding: 1em; 
 
} 
 

 
.align-center { 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a class="caret-right" href="#" title="Get Started"> 
 
    <div class="box"> 
 
    <p class="align-center">Get started now with <span class="color-theme-a">5 free lessons</span>.</p> 
 
    <p class="align-center">No credit card needed</p> 
 
    </div> 
 
</a>