Question

我正在尝试创建一个双列布局，第1列中的内容在中间水平和垂直对齐，因此第2列的内容大小不同。两列的宽度固定为屏幕宽度的50％。

在现代CSS投诉浏览器中，我可以简单地执行以下操作：

CSS：

#wrapper
{
    display: table;
    width: 100%;

    /* for illustration purposes */
    background: #ddd;
}

#left-column
{
    display: table-cell;
    width: 50%;
    text-align: center;
    vertical-align: middle;

    /* for illustration purposes */
    background: #fdd;
}

#right-column
{
    display: table-cell;

    /* for illustration purposes */
    background: #ddf;
}

HTML：

<div id="wrapper">
    <div id="left-column">
        <p>I am both horizontally and vertically centered in column 1</p>
    </div>
    <div id="right-column">
        <p>I am dynamic content in column 2, i.e. my size will vary</p>
        <p>I am dynamic content in column 2, i.e. my size will vary</p>
        <p>I am dynamic content in column 2, i.e. my size will vary</p>
        <p>I am dynamic content in column 2, i.e. my size will vary</p>
        <p>I am dynamic content in column 2, i.e. my size will vary</p>
    </div>
</div>

然而，坏消息是我还需要这个在IE6和IE7中工作......

到目前为止我看到的解决方案非常难看并且涉及许多嵌套的div。实现这一目标的最简洁方法是什么，以便它可以在所有浏览器中运行？我已尝试使用float：left，对于两列布局，但我的主要问题是第一列中的垂直对齐。

PS。我不想使用表格进行布局，虽然它确实有效，但它对屏幕阅读器不利，因此违反了我的可访问性指南。

提前致谢！

Answer 1

不幸的是，垂直居中的东西要么采取javascript或一些丑陋的嵌套div。如果你是一个疯狂的纯粹主义者，我会建议左侧浮动，左上方对齐，并使用javascript进行增强，将其推向中心位置。

那就是说，一对夫妻包裹者从未杀过任何人。

Answer 2

对于左侧列中的静态内容，您的解决方案很简单：使用固定高度和padding。

<强> CSS

#left-column {
    height: 50%; /* adjust height dependent on N&S padding */
    padding: 20% 0; /* adds north and south padding to "center" #left-content */
}
#left-content {
    height: 10%; /* adjust to exactly fit content */
    text-align: center;

    /* basically for testing, this will help us find the ideal
     * percentage for our #left-content height. */
    overflow: hidden;
    background-color: red;
}

<强> HTML

<div id="left-column">

    <div id="left-content">

        your image and text goes here

    </div><!-- /left-content -->

</div><!-- /left-column -->

在CSS中，您需要调整高度和填充以获得所需的结果。

我建议确保#left-content中的内容100％响应。这可能不是100％的解决方案，但随着它的一些工作（@media查询等），您应该能够在每个浏览器和视口大小中实现您的目标。我唯一可以想到的是可能打破这样的东西是用户增加的字体大小。

Answer 3

破解它，我认为...原始帖子中的Html和CSS如下：

#wrapper
{
    width: 100%;
    overflow: hidden;
    position: relative;

    /* for illustration purposes */
    background: #ddd;
}

#wrapper p { font-size:1em; margin: .5em; }

#right-column
{
    margin-left: 50%;
    overflow: hidden;

    /* for illustration purposes */
    background: #ddf;
}

#left-column
{
    width: 50%;
    height: 2em;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1em;
    text-align: center;

    /* for illustration purposes */
    background: #fdd;
}

内部＆lt; p＆gt;上的边距标签需要设置，以便我们知道高度是多少（如果你没有明确地设置它，不同的浏览器似乎默认了＆lt; p＆gt;的边距），我使用它以便它在不同的显示器上很好地缩放。

有趣的是，这么简单的东西可以实现这样的痛苦...我仍然不是百分之百满意，就好像第1列的内容包裹在一个小显示器（或最小化的窗口）上，然后赢了不能垂直对齐......

动态大小，两列布局，一列垂直和水平对齐，支持传统浏览器

3 个答案: