html - 如何将网页的各个部分居中

Question

我正在开发一个分成三部分的网站。我在绝对中心有图像，左右有文字。当网页的宽度改变时，我如何将每个单独的部分居中，使其按比例居中？涉及margin-left/right auto的东西？

希望一切都有意义..

谢谢！

文字图

| 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 的百分比）或设置绝对左边距和右边距宽度。