0

流動的な幅を持つコンテナー内で、タイトルや作成者などのメタ データを含む 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;
            }
        }
    }
}
4

2 に答える 2

0

中心にしたいものでこれを試してください。@domkoscielak のコードを変更して、動作するようにしました。

.meta {
  width: 180px;
  height: 120px;
  top: 50%;
  margin-top: -60px; /*half of height*/
  position: absolute;
}
于 2013-03-28T03:29:56.363 に答える
0

Less を試してみましたが、codepen.io でエラーが発生したため、デバッグできませんでした。

次のような簡単なことを試すことができます。

.container {
  border: 2px solid blue;
  width: 180px;
  height: 120px;
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
 }

ここで動作確認

この記事も役立つかもしれません: http://logconsole.com/vertical-align-center-image/

画像を垂直方向に中央揃えすることですが、ほとんどの場合、div で画像を変更できます。

于 2013-03-28T03:22:55.827 に答える