其他分享
首页 > 其他分享> > 让div中的图片剧中上下左右

让div中的图片剧中上下左右

作者:互联网

<body> <div> <img src="1.jpg" alt="haha"> </div> </body>

 

 方法一:

将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <style type="text/css"> *{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; } </style>

方法二:

通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style type="text/css"> *{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; /* 宽度的一半 */ } </style>

 方法三:可以用在不清楚图片图片或元素的真实宽高情况下

还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <style type="text/css"> *{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%); } </style>

 方法四:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; position: relative; border:1px solid #000; } img { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>

 方法五:弹性布局flex

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style type="text/css"> *{margin: 0;padding:0;} div{ width:150px; height: 100px; border:1px solid #000; display: flex; justify-content: center; align-items: center; } img { width: 50px; height: 50px; } </style>

标签:style,50px,50%,height,width,div,上下左右,剧中
来源: https://www.cnblogs.com/xkyy/p/14827922.html