我是新来的css,我试图将我的图像水平地对齐在一个div元素.
我试过浮动和显示：内联但仍然是垂直对齐.
#maincontainer {
left : 50px;
top : 80px;
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
position : absolute;
overflow : scroll;
}
#maincontainer img {
top : 10px;
left : 10px;
width : 80px;
height : 80px;
padding : 10px;
position :relative;
float : left;
}
请帮忙告诉我,如果我错了smwhere.
解决方法
水平对齐
HTML
<div id="maincontainer">
<img />
</div>
CSS
#maincontainer {
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
}
#maincontainer img {
width : 80px;
height : 80px;
margin:0 auto;
display:block;
background:red;
}
垂直和水平对齐
HTML
<div id="maincontainer">
<div><img /></div>
</div>
CSS
#maincontainer {
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
display:table;
}
#maincontainer div img {
width : 80px;
height : 80px;
background:red;
display:inline-block;
}
#maincontainer div{
display:table-cell;
text-align: center;
vertical-align: middle;
}
只是删除背景：从img的红色
