2016-05-09 14 views
1

テキストを親コンテナの中央に垂直に整列しようとしていますが、中心より少し下に整列しています。ここで縦方向の整列:親コンテナ内の要素(jsfiddle)

フィドルです: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> 

答えて

1

あなた.caret-right:afterルールにtransform: translateY(-50%);を追加します。

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

この正しく要素が垂直にその高さの50%を相殺あなたのキャレットをセンター:

.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>

+1

素晴らしい作品、ありがとうございます! – JROB

+0

ようこそ。 – timolawl

1

完全に垂直、.caret-right:afterを中央に50%top値のままにし、次を追加するには:

transform: translateY(-50%); 
0

CSS3 transformプロパティを使用する代わりに、.caret-rightの行の高さに特定の値を割り当ててから、u線の高さの半分に負の上部マージンがある。

私は個人的にはtransform: translateY(-50%)ルールを好んでいますが、代わりの方法でそれを行う方法を知っておくとよいでしょう。

.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>

関連する問題