为什么不是img的中心?

时间:2015-01-30 17:28:37

标签: css image

更新:是的,将text-align:center放在包含的div中就可以了!

我不知道为什么img没有居中。

这里是CSS:

#add_next {     
   clear: both;     
   width: 79%;  
   margin-right: auto;  
   margin-left: auto;   
   margin-top: 20px; 
}

.next_button {  
   height: 60px;    
   margin-top: 13px;    
   margin-left: auto;   
   margin-right: auto;  
   text-align: center;  
   -webkit-transition: all 0.1s;    
   transition: all 0.1s; 
}

这是html片段:

<div id="add_next"><a href=# ><img src="images/next button5.png" class="next_button" /></a></div>

3 个答案:

答案 0 :(得分:1)

您可以将display:block添加到图片中,或text-align:center添加到包含的div。

目前,图片是内联元素,因此它会与默认文本对齐(通常是左对齐)

答案 1 :(得分:1)

如果将text-align:center;添加到父div元素,它将居中。

fiddle

答案 2 :(得分:1)

内联元素(a,img)无法使用自动边距居中,并且您无法将text-align: center;应用于要居中的元素。

尝试将text-align: center;添加到#add_next。