Question

我正在开发一个分为三个的网站。我有绝对中心的图像和左右两边的文本。我如何将每个单独的部分居中，以便在网页宽度变化时按比例居中？什么涉及保证金左/右自动？

希望一切都有意义..

谢谢！

文字图

| 1 | 2 | 3 |

拉伸网页

| * * 1 * * | * * 2 * * | * * 3 * * |

Answer 1

如果您提前了解每列内容的宽度，则可以使用3个缩放div来表示列，每个列包含内容的固定宽度居中div。

在正文中，对于三列，您可以（使用适合您页面的大小替换像素宽度）：

    <div class="outer" style="margin-left:0; margin-right:67%;">
    <div class="inner" style="width: 100px;">
    <p>some text</p><p>more text</p></div></div>

    <div class="outer" style="margin-left:33%; margin-right:33%;">
    <div class="inner" style="width: 200px;">
    <img src="someimage"></div></div>

    <div class="outer" style="margin-left:67%; margin-right:0;">
    <div class="inner" style="width: 150px;">
    <p>and another<br>piece of text</p></div></div>

并且，在头部，每种类型的div的样式。

    <style type="text/css">
    .outer {
    position:absolute;
    width:33%;
    }
    .inner {
    margin-left:auto;
    margin-right:auto;
    }
    </style>

根据您网站的需要，对于每个内部div，您可以设置绝对大小，设置相对大小（包含33％宽度div的百分比），或设置绝对左边距和右边距 - 边距宽度。

如何居中网页的各个部分

1 个答案: