我想在.net页面上显示图像,我从数据库加载(因此数量可能会有所不同).所有图像的宽度和高度分别不同,分别为130px和60px.我想将图像放入容器元素中,其固定宽度为130px,固定高度为60px.图像应垂直和水平居中.如果可能,容器元件应水平对齐.
我尝试了div(浮动)和跨度.使用div,我得到固定的大小,但不能使图像居中.有了span,我可以居中,但不设置任何尺寸.如果我将span放入div,它似乎表现得像div(中心被忽略).
我尝试了div(浮动)和跨度.使用div,我得到固定的大小,但不能使图像居中.有了span,我可以居中,但不设置任何尺寸.如果我将span放入div,它似乎表现得像div(中心被忽略).
解决方法
你可以看到它在
http://jsfiddle.net/km5dk/8/上工作
但我认为你搜索的是这样的东西.
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}