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

尝试了您的 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 回答
0

在你想要居中的地方试试这个。我更改了@domkoscielak 的代码以使其正常工作。

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