Question

嘿伙计们我试图将2个div的内容垂直居中，基本上我的结构是这样的：

<div>
    <div class="left">
            <span>
             ONCE YOU <br>  
             PICK US, <br>
             YOU WILL <br>
             NEVER <br>
             WANT TO <br>
             GO <br>
             ANYWHERE <br>
             ELSE <br>
            </span>                 
    </div>
    <div class="right">
            <span>Abouts us</span>
            <button class="about-btn"><a href="#">Know More</a></button> 
    </div>
</div>

我正在使用的技术如下，我从stackoverflow示例中的解决方案中选择：

                   span:after {
                        content:'';
                        height: 100%;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    span {
                        display:inline-block;
                        vertical-align:middle;
                        font-weight: 700;
                        letter-spacing: -3px;
                        height: 100%;
                    }

这个解决方案的问题在于它不是div中的唯一内容，因此我不可能给出范围height:100%，好像我必须使用跨越后的另一个元素，因为span在元素的高度为100％被推入主容器外。

小提琴here.

另一个问题是<div class="left">的内容不是垂直居中的。

我也在尝试显示：表格解决方案，但这似乎搞乱了布局。

有人可以帮我解决这个问题。

编辑:: 我试图通过哈希姆来关注this解决方案。

谢谢你。

亚历-Z

Answer 1

以下是如何使用表格布局：

http://jsfiddle.net/xe6n14xq/

识别父母，使其成为一个桌子：

#wrap {
display: table;
width: 100%; // displaying as table makes the content shrink-wrap
}

然后孩子们可以成为垂直对齐的桌子细胞：

.right, .left {
height: 500px;
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 3em;
}

您还可以对儿童的内容进行垂直转换：

http://jsfiddle.net/0sop57yc/

span, .about-btn {
display: block; // Chrome apparently doesn't agree with inline-block here
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

编辑 - 不确定是谁为表添加了width: 100%，但这是一个很好的修复，谢谢。

不使用高度100％垂直居中div的内容

1 个答案: