Home > Web Front-end > HTML Tutorial > The picture is horizontally, vertically and centered inside the div_html/css_WEB-ITnose

The picture is horizontally, vertically and centered inside the div_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:25:36
Original
1129 people have browsed it



I want the image to be centered horizontally and vertically inside the blue box. What should I do?





Reply to discussion (solution)


I can only center it horizontally now
.pic_upload It’s div css

 .pic_upload {     width:180px;     height:180px;     float:left;     margin:20px 0 0 20px;     border:2px solid #5FA9E1;     background-color:#F3F3F3;     }        .pic_upload  img {display:block; margin:0 auto;}
Copy after login

table
At this time, the benefits of table are reflected

.pic_upload {     width:180px;     height:180px;     float:left;     margin:20px 0 0 20px;     border:2px solid #5FA9E1;     background-color:#F3F3F3;     position:relative;/*使图片相对这个div绝对定位*/     }.pic_upload img {    margin: auto;	position: absolute;	top: 0;	left: 0;	bottom: 0;	right: 0;}
Copy after login
Copy after login

Is this possible...

.pic_upload {     width:180px;     height:180px;     float:left;     margin:20px 0 0 20px;     border:2px solid #5FA9E1;     background-color:#F3F3F3;     position:relative;/*使图片相对这个div绝对定位*/     }.pic_upload img {    margin: auto;	position: absolute;	top: 0;	left: 0;	bottom: 0;	right: 0;}
Copy after login
Copy after login

Is this okay...

Thank you! ! That’s it!

Yeah, hey.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template