4

我正在创建一个需要将几块文本和图片放在一起的网站。但我也希望他们居中。我为这些元素中的每一个都使用了一个设置大小，所以如果有人调整他们的屏幕大小，我希望我的页面不断更改彼此相邻放置的 div 的数量。通常我会使用 float:left; 为此，但这不起作用，因为我希望我的页面居中。

所以它看起来有点像这样：

________
|1 2 3 4| 
|  5 6  |
|_______|

但是当我调整屏幕大小时，它看起来像这样：

______
|1 2 3|
|4 5 6|
|_____|

如果我放大它看起来像这样：

___________
|1 2 3 4 5 |
|    6     |
|__________|

目前的CSS看起来像这样：

 div.child{
width:23%;
float:left;
height:600px;
padding:0px;
min-width:200px;
max-width:230px;
overflow:hidden;
text-align:center;
border-style:solid;
border-width:5px;
overflow:visible;
display:inline-block;
}

和

div.parrent{
padding:0px;
border-style:solid;
border-top-style:solid;
border-width:5px;
overflow:hidden;
text-align:center;
}

有人有任何提示吗？

4

3 回答 3

5

全部制作并将display:inline-block父级设置为拥有text-align:center.

演示1：http: //jsfiddle.net/xdEmz/1/

演示 2：http: //jsfiddle.net/E5sHa/2/

Demo 2 截图

请注意，如果您希望每个项目内的图片居中，您可以：

  • 将图像保留为display:inline（默认值）并text-align:center从父级流过，并使用显式<br>强制在它们之后换行，或者
  • 您可以将图片设置为display:block（正如我在上面的第二个演示中所做的那样），然后使用margin:0 auto使它们在其父容器中水平居中。
于 2012-12-26T14:24:55.090 回答
2

您可以使用min-widthandmax-width和 来创建一个容器text-align:center。

在此处输入图像描述

于 2012-12-26T14:23:17.607 回答
2

使单个元素显示：带有文本对齐中心的内联和容器元素...这里的示例http://psarink.org/gallery.php

于 2012-12-26T14:27:30.543 回答