Question

我希望所有四列都位于浏览器窗口的中间位置。我尝试使用vertical align属性，但它没有任何效果。你们为此推荐什么？感谢。

代码：

center div {width: 150px; display: inline-block; background: lightgray; padding: 0; margin: 0; border: 0; vertical-align: 50%;}

center {margin: 0; padding: 0; border: 0;}

jsfiddle：http://jsfiddle.net/26n4e/7/

Answer 1

给我

<center>

标签已经过时，只能用于文本/内联元素。如果您使用块元素，我建议使用解决方法“内联块”，而是将左/右边距设置为自动和固定宽度，如下所示：

margin: 0px auto;
width: 600px;

小提琴：

http://jsfiddle.net/26n4e/8/

编辑 - 垂直！

将此添加到您的中心元素（固定高度必须在此处）

position: absolute; margin: auto; padding: 0; top:0; right:0; bottom:0; left:0; height: 400px;

小提琴： http://jsfiddle.net/26n4e/9/

Answer 2

您可以按如下方式使用CSS表：

将<center>元素替换为标准div，然后将内容包装在p标记（或其他一些块级元素）中：

<div class="wrapper">
    <div><p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p></div>
    ...
</div>

应用以下CSS：

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    margin: 0 auto;
    padding: 0;
    display: table;
    height: 100%;

}
.wrapper div {
    width: 150px;
    display: table-cell;
    vertical-align: middle;
}
.wrapper div p {
    background: lightgray;
    margin: 0;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/TU8KJ/

您需要为<body>和<html>元素将高度设置为100％。这将为CSS表.wrapper和CSS表格单元格.wrapper div提供高度。

水平居中归因于margin: 0 auto上的.wrapper，垂直居中归因于vertical-align: middle上的.wrapper div。

如何在浏览器窗口中自动居中文本列？

2 个答案:

编辑 - 垂直！