怎样用css只让div中的图片居中？
<html>
<head>
<title>点亮和关闭灯泡</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
var flag = false;
$(document).ready(function (){
$("#myimage").click(function (){
//$("#myimage").toggle();
if(flag == false){
$("#myimage").attr("src","http://www.w3school.com.cn /i/eg_bulbon.gif");
flag = true;
}
else{
$("#myimage").attr("src","http://www.w3school.com.cn /i/eg_bulboff.gif");
flag = false;
}
});
});
</script>
<style>
img{width:109px;margin:0 auto;}//不能实现图片的居中效果，为什么呢？？？？？？？
//div{text-align:center;}//能实现所有文字包括图片的居中效果
//body{text-align:center;}//能实现所有文字包括图片的居中效果
</style>
</head>
<body>
<div style="background-color:#ccc">
<img id="myimage" src="http://www.w3school.com.cn /i/eg_bulboff.gif" width="100" height="180">
<p>请点击灯泡，把它点亮！</p>
</div>
<p id="p2">请点击灯泡，把它点亮！</p>
</body>
</html>
网上关于这个margin:0 auto;的有好多，但是基本上就是包含了text-align:center属性，只是表面上写了这个margin:0 auto属性，结果是把图片和文字都居中了。
先通过text-align:center属性让整体(图片和文字)居中，然后再对图片除外的设置对齐方式，测试后也是可行的。
这是个问题：难道就不能直接只使图片居中吗？求指点，只让图片居中怎么弄的？
图片路径：src="http://www.w3school.com.cn /i/eg_bulboff.gif" width="100" height="180"里面多了个空格，要去掉 展开
1、打开在线写前端代码的网站如jsrun或者jsfiddle。
目2、标是做一个如图所示的效果，不同大小的图片。
3、每个方框的html 如下，
<div>
<span>
<img src='图片地址'>
</img>
</span>
</div>
4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。
其中
display: table-cell;
text-align: center;
vertical-align: middle;
这3行决定居中效果。
其中
img {
max-width: 100%;
max-height: 100%;
}
的目的是让图片可以缩放而比例不变。
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
5、效果如下，很好的实现居中。
6、上面是div为float的情况
div如果是absolute或fixed也可以正常表现。
只有一个div的情况下，代码如下
<div>
<span>
<img src='图片地址'>
</img>
</span>
</div>
div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
7、这张图片仍然是居中的，没有收到父容器的影响。
div图片居中-图片在DIV内居中，让图片中DIV盒子里水平居中。让图片中DIV对象盒子内水平居中，和让文字字体在DIV盒子内水平居中CSS相同。
CSS让对象内容居中样式单词为：
text-align:center
text-align 为内容居于对象什么位置属性center值为居中
一、传统HTML让图片横向水平居中方法
直接在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。
align="center"使用方法：
<div align="center"></div>
二、CSS让图片中DIV对象内水平居中
使用CSS样式让DIV内图片居中（水平居中）
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>图片横向居中</title>
<style>
.divcss5{text-align:center}
</style>
</head>
<body>
<div class="divcss5"><img src="http://www.divcss5.com/img201305/divcss5-logo-201305.gif" /></div>
</body>
</html>
2、水平居中实例
div.layout { position:relative;width:100%;margin:auto }
img { width:100px;position:absolute;left:50%;margin-left:-50px }<div class="layout">
<img src="" />
</div>
通过定位方式将图片绝对居中
text-align:center;让所有的内容都居中，看清问题。不过还是谢了！
你设置了div的属性 把他去了 在img上加一个div 设置class 然后ran这个div的class text-align 就是只居中这个div
img{width:109px;}
.01{text-align:center
}
请点击灯泡，把它点亮！
请点击灯泡，把它点亮！
图片是没用居中的 他必须继承 你设置div居中 但是那个div包含下面的p 当然就都居中了
|
广告 您可能关注的内容 |
