Question

我正在设计一个包含图块内容的页面。我能够定位瓷砖中心，但不能用它的内容做到这一点。切片内容的垂直对齐方式居中，但水平对齐方向朝左。我错过的任何调整？

这是我的剧本，

HTML

<div class="content">
        <div class="tile-container">
            <div class="tile">
                <p>Tile 1</p>
            </div>
            <div class="tile">
                <p>Tile 2</p>
            </div>
            <div class="tile">
                <p>Tile 3</p>
            </div>
            <div class="tile">
                <p>Tile 4</p>
            </div>               

        </div>
    </div>

CSS

.content {
    margin-top: 10%;
}

.tile-container {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.tile {
    display: inline-block;
    position: relative;
    height: 250px;
    width: 250px;
    background: red;
    margin: 8px;
    border-radius: 5px;
    z-index: 0;
}

    .tile:hover {
        background: red;
        z-index: 100;
        -moz-transform: scale(1.1,1);
        -ms-transform: scale(1.1,1);
        -o-transform: scale(1.1,1);
        -webkit-transform: scale(1.1,1);
        transform: scale(1.1,1);
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    }

.tile-container p {
    margin: 0;
    position: absolute;
    top: 50%;
}

Answer 1

绝对的立场并不好玩：

.tile-container p {
    margin-top:50%;
    text-align:center;
}

Answer 2

请试试这个

  .tile-container p{

   position:relative;

}

Answer 3

所有显示的解决方案都是绝对静态的。如果你必须处理不同的内容，你应该采取不同的方式。使用table和table-cell。这将使您的标记响应内容。

DEMO

更新：

我将p包裹在另外的div中并更改了css：

.tile div{
    display: table;
    height: 100%;
    width: 100%;
}

.tile div p{
    display: table-cell;
    vertical-align: middle;
}
.tile-container p {
    margin: 0;
    position: relative;
}

在DIV标记内对齐文本/内容中心

3 个答案: