CSS 怎么将图片在 div 中居中显示? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
图片在 div 中居中的方式
利用图片的 margin 属性将图片水平居中, 利用 div 的 padding 属性将图片垂直居中.
结构代码同上;
CSS 代码如下:
- div {
- width:300px;
- height:150px;
- background-color:#eee;
- padding-top:50px;
- border:#000 1px solid;
- }
- img {
- display:block; margin:0 auto;
- }
备注:
img 是内联元素, 要设置其 margin 属性使其居中, 就要将其转换为块元素 display:block; 然后利用 margin:0 auto; 实现图片的水平居中;(有的设计师为图片再加个 div 标签, 然后通过 div 标签的 margin 实现居中
思路: 利用 text-align 属性将图片水平居中, 然后设置 padding-top 的值使其垂直居中.
结构如下:
- <style type="text/css">
- div{
- width:180px;
- height:180px;
- border:1px solid #000;
- position:relative;
- display:table-cell;
- text-align:center;
- vertical-align:middle;
- }
- div p{
- position:static;
- +position:absolute;
- top:50%;
- }
- div img{
- position:static;
- +position:relative;
- top:-50%;
- left:-50%;
- }
- </style>
- <div><p><img src="0225/12986229678396.jpg" width="120" height="120"></p></div><br>
- <div><p><img src="0225/12986229678396.jpg" width="160" height="160"></p></div>
方法二
- <div>
- <img src="images/tt.gif" width="150" height="100" />
- </div>
CSS 样式如下:
- div {
- width:300px;
- height:150px;
- background-color:#ccc;
- border:#000 1px solid;
- text-align:center;
- padding-top:50px;
- }
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17450.html