JSFiddle以下で見られるように、「トグル」アニメーションを備えたティーザーがあります。
.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;
}<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>青いボックスの垂直方向の中央にリンクを揃えたい。リンクは1行または2行（最大）にすることができますが、常に垂直方向の中央に配置する必要があります。CSSプロパティlineheightは2行のリンクでは機能しませんが、table（-cell）メソッドも機能しません（上記を参照）。
1行リンクと2行リンクの両方をボックスの中央に配置する方法はありますか？
要素を垂直方向に中央揃えするには、次のスタイルを適用できます。
.element
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
現在のスタイルを複製するには、テーブルのセルを列に置き換える必要があります。ソリューションについては、SebastianEkstromの功績によるものです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加