0

我想在高度上对齐两个侧边栏和一个居中的图像。此外，侧边栏（包含文本）应与外部容器的高度垂直对齐。

我做了一个描述问题的小提琴：http: //jsfiddle.net/SW3DT/

在全屏显示此示例时，您会看到一切正确，但是当您查看小提琴 html 预览（或任何较小的视图）时，它不再起作用了。

所以存在以下问题：

  1. 对齐旁边和中心容器水平（位置：绝对，左，右）
  2. 将子对象从侧面（在本例中为 p）垂直对齐（打破绝对）
  3. 动态执行所有这些操作，以便可以在不同的屏幕尺寸上使用

如何将所有三个点一起查看使得使用 css 编写代码变得很困难。

有没有人有办法解决吗？

此外：我如何为此类任务定义可重用的 css 类？

最好的问候， bsus

4

1 回答 1

1

如果我确实正确理解了您的问题，那么您有点想要一个具有三列的居中包装器，左右列占据 200 像素的宽度。如果是这种情况：

请参阅此小提琴示例

HTML：

<div class="content">
    <aside class="column right">
        <p>
             text...
        </p>
    </aside>
    <aside class="column left">
        <p>
             text...
        </p>
    </aside>
    <div class="column center">
        <img class="home_image" src="path_to_image.png" />
    </div>
</div>

CSS：

/* the main wrapper */
.content {
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 500px;
  margin-left: -401px; margin-top: -251px;
  border: 1px solid #D9D9D9;
}

/* columns */
.column {
    position: absolute; top: 0; bottom: 0;
    width: 180px;
    padding: 10px;
}

.column.left{
    left: 0; background-color: #F2F2F2;
}
.column.right {
    right: 0; background-color: #F2F2F2;
}
.column.center {
    left: 200px; right: 200px;
    text-align: center;
    width: auto;
}

.column.center img {
    border: 1px solid #111; border-radius: 22px;
    width: 128px; height: 128px;
    margin: 0 auto;
}

此外：我如何为此类任务定义可重用的 css 类？

您可以看到.column应用于.left,.right和.center元素的类，因此可以在所有三个上重用。

于 2012-05-14T18:05:38.507 回答