关于图片在div中居中问题

①作为背景图片

 1  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2             <html xmlns="http://www.w3.org/1999/xhtml">
 3             <head>
 4             <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5             <title>无标题文档</title>
 6             <style>
 7             .img{
 8               overflow: auto;
 9               text-align: center;
10               height: 200px;width: 90%;
11               margin:0 auto 20px;
12               border-radius: 0px;
13               background-repeat: no-repeat;
14               background-position: center top;
15               -webkit-background-size: 100% 150px;
16               background-size:  100% 200px;
17               border:1px solid red;
18             }
19             </style>
20             </head>
21
22             <body>
23             <div class="img" style="background-image:url(../image/5.png)">
24
25             </div>
26             <script>
27
28             </script>
29             </body>
30             </html>

②作为普通图片

时间: 2024-12-19 19:26:59

关于图片在div中居中问题的相关文章

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

让图片在div 中居中的方法

方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt.gif" width="150" height="100" /> </div> CSS样式如下: div {width:300px; height:150px; background-color:#CCC; border:#000 1px

实现图片在一个div中垂直左右都对齐

<div class="info_top_left"> <img src="images/img-product01.png" > </div> .info_top_left { height: 100px; width: 97px; line-height: 100px; border: 1px solid #CACACA; float: left; text-align: center; font-size: 0; } .in

将图片在div中进行水平和垂直对齐

将图片在div中进行水平和垂直对齐 要进行水平对齐,只需在父级元素的样式中指定: text-align: center; 注意,是在父级元素的样式中指定,而不是在img本身的样式中指定. 要进行垂直对齐,相对来说则麻烦得多.期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样).真正有效的方法如下: 首先,由于vertical-align: middle这个样式是只有在displa

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

img在div中居中的问题

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中). 如果图片在div中下的span属性中,必须转换成display:block:然后padding-top:10px.

CSS-布局【1】-图片在div中垂直居中

方法一:在img标签前加span <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; text-ali

css 控制不规则img再div中居中完整显示

img外包裹一个div设置样式 div{width: 100%; text-align: center; height: 1.43rem; overflow: hidden; background-color: #fff;} 给img设置样式 img{max-width: 100%; max-height: 100%;} 就那么简单!.

css控制背景图片在浏览器中居中,下拉浏览器的时候背景图一直不变

如 http://www.gm.com/ css样式如下 1 body{ margin:0; padding:0;} 2 #con{ 3 position:absolute; 4 top:0; 5 left:0; 6 height:100%; 7 width:100%; 8 background-image:url("maskimg/star.jpg"); 9 background-position: center 0; 10 background-repeat: no-repeat;