以CSS/HTML为中心的几个侧重点

I'm creating a website which needs several blocks of texts and picture placed next to eachother. But I also want them to be centered. I'm using a set size for each of these elements so if someone resizes their screen I want my page to keep changing the number of divs placed next to each other. Normally I would use float:left; for this but that's not going to work as I want my page to be centered to the middle.

我正在创建一个网站，它需要几个区块的文本和图片放在一起。但我也希望它们是中心的。我对每个元素都使用了一个设置大小，所以如果有人调整了他们的屏幕大小，我希望我的页面继续改变放置在彼此旁边的div的数量。通常我会使用float:left;对于这个，但那不会起作用，因为我想让页面居中。

so it would look a bit like this:

它看起来是这样的

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

but when I resize the screen it would look like this:

但是当我调整屏幕的大小时它会是这样的:

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

and if I size up it would look like this:

如果我放大它会是这样的:

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

currently the css looks like this:

目前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;
}

and

和

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

Anyone got any tips?

任何人有建议吗?

3 个解决方案

#1

Make them all display:inline-block and set the parent to have text-align:center.

使它们都显示:inline-block，并将父对象设置为text-align:center。

Demo 1: http://jsfiddle.net/xdEmz/1/

Demo 2: http://jsfiddle.net/E5sHa/2/

Note that if you want the pictures inside each item to be centered you can either:

注意，如果你想让每个项目的图片居中，你可以:

• leave the images as display:inline (the default) and let text-align:center flow through from the parent, and use an explicit <br> to force wrapping after them, or
• 将图像保留为display:inline(默认)，并让text-align:center从父对象中流过，并使用显式的
  强制在其之后进行包装，或
• you can set the pictures to display:block (as I have done in the second demo above) and then use margin:0 auto to get them horizontally centered within their parent container.
• 您可以将图片设置为display:block(就像我在上面的第二个演示中所做的那样)，然后使用margin:0 auto使它们在父容器中水平居中。

#2

Make the individual elements display:inline and container element with text-align center...example here http://psarink.org/gallery.php

使单个元素显示:内联和容器元素与文本对齐中心…例子http://psarink.org/gallery.php

#3

you can do this creating a container with min-width and max-width and text-align:center.

您可以这样做，创建一个具有最小宽度、最大宽度和文本对齐:center的容器。