img标签的水平居中、靠左、靠右 |
您所在的位置：网站首页 › html为什么图片不居中 › img标签的水平居中、靠左、靠右 |
|
//水平靠左
.alignleft {
display: inline;
float: left;
}
//水平靠右
.alignright {
display: inline;
float: right;
}
//水平居中
.aligncenter {
clear: both;
display: block;
margin: auto;
}
div里的img标签实现水平垂直居中
将display设置成table-cell，水平居中设置text-align为center，垂直居中设置vertical-align为middle *{ margin: 0; padding: 0; } div{ width: 150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #000; } img { width: 50px; height: 50px; }通过position定位实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%,此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。 *{ margin: 0; padding: 0; } div{ width: 150px; height: 100px; position: relative; border: 1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; // 高度的一半 margin-left: -25px; // 宽度的一半 }用于不清楚图片或元素的真实宽高情况：通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半，如果不知道元素的宽高，可以用transform: translate(-50%,-50%); *{ margin: 0; padding: 0; } div{ width: 150px; height: 100px; position: relative; border: 1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }弹性布局flex *{ margin: 0; padding: 0; } div{ width: 150px; height: 100px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; margin: 0 auto; } img { width: 50px; height: 50px; }设置父div为table-cell属性 *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 1px solid #000; display: table-cell; text-align: center; vertical-align: middle; } img { width: 100px; height: 100px; display: inline-block; }无固定宽高 *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; margin: 0 auto; text-align: center; position: relative; border: 1px solid #000; } img { width: 100px; height: 100px; position: absolute; border: 1px solid #000; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }固定宽高 *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 1px solid #000; margin: 0 auto; text-align: center; position: relative; } img { width: 100px; height: 100px; position: absolute; border: 1px solid #000; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; }在div中添加span空元素 *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; border: 1px solid #000; margin: 0 auto; text-align: center; } img { width: 100px; height: 100px; border: 1px solid #000; display: inline-block; vertical-align: middle; } #box span{ display: inline-block; width: 0; height: 100%; vertical-align: middle; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |