流動的な幅を持つコンテナー内で、タイトルや作成者などのメタ データを含む div を垂直方向に中央揃えできるようにしたいと考えています。以下の例では、流動的な幅の記事内で .meta div を垂直方向の中央に配置したいと考えています。
この記事 ( http://css-tricks.com/centering-in-the-unknown/ ) に従ってみましたが、うまくいきません。
HTML
<div class="container">
<h3>Test</h3>
<article>
<div class="meta">
<div class="title"></div>
<div class="author"></div>
<img src="" />
</div>
</article>
</div>
CSS (LESS を使用)
.container {
h3 {
margin: -5px 0 0 0;
padding: 32px 0px 16px 0;
.freight-sans-pro;
font-size: 1.375em;
line-height: 1em;
font-weight: 200;
}
article {
max-height: 375px;
overflow: hidden;
position: relative;
z-index: 900;
margin-bottom: 2px;
background-color: @color-black;
line-height: 0em;
a {
max-height: 375px;
display: block;
img { opacity: .5; .opacity-transition; }
}
.meta {
width: 100%;
position: absolute;
bottom: 40%;
z-index: 500;
padding: 0px 10%;
color: @color-white;
font-size: 20px;
text-align: center;
.title {
margin: 0;
font-size: 2em;
line-height: 1em;
font-weight: 700;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
padding-bottom: 8px;
text-decoration: none;
display: block;
}
.author {
margin: 0;
font-size: .8em;
line-height: .75em;
font-style: italic;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
}
}
}