将图像居中放在div中并始终将它们放在一起

Question

我正在为一位朋友制作一个网站，我的图像居中问题。我希望它们在水平和垂直方向都居中，并将它们全部放在一起，如果屏幕对于图像来说太小，请调整它们的大小。

我想要的是什么：

现在的样子：

<div id="mainbox">
    <img src="http://i.imgur.com/s3o9yEA.png">
    <img src="http://i.imgur.com/s3o9yEA.png">
    <img src="http://i.imgur.com/s3o9yEA.png">
    <img src="http://i.imgur.com/s3o9yEA.png">
    <img src="http://i.imgur.com/s3o9yEA.png">
    <img src="http://i.imgur.com/s3o9yEA.png">
</div>

#mainbox {
    position: absolute;
    top: 70px;
    width: 90%;
    height: 80%;
    border-top: 1px solid #3e3e3e;
    border-bottom: 1px solid #3e3e3e;
    left: 5%;
    max-width: 100%;
    right: 5%;
}

JSFiddle：http://jsfiddle.net/whtc4chq/

我尝试过很多东西，但它们似乎没有用，任何建议都值得赞赏。

Answer 1

您可以使用表格

＆＃13;

＆＃13;

#mainbox {
	position: absolute;
	top: 70px;
	width: 90%;
	height: 80%;
	border-top: 1px solid #3e3e3e;
	border-bottom: 1px solid #3e3e3e;
	left: 5%;
        max-width: 100%;
	right: 5%;
}

＆＃13;

<table id="mainbox">
    <tr>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    </tr>
    <tr>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
        <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我自己管理。 http://jsfiddle.net/whtc4chq/4/

要使图像居中创建一个表并始终使它们合适，请设置最大尺寸：

CSS

#mainbox {
position: absolute;
top: 70px;
width: 90%;
height: 80%;
border-top: 1px solid #3e3e3e;
border-bottom: 1px solid #3e3e3e;
left: 5%;
right: 5%;
}
#wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

#wrapper td {
vertical-align: middle;
text-align: center;
}

#wrapper td img {
max-width:100%;
max-height: auto;
}

HTML

    <div id="mainbox">
    <table id="wrapper">
        <tr>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
    <td><img src="http://i.imgur.com/s3o9yEA.png" /></td>
        </tr>
    </table>
</div>