为什么 img 不居中？

Question

更新：是的，将 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>

Answer 1

您可以将 display:block 添加到图像或将 text-align:center 添加到 div。

目前图片是一个内联元素，因此它将与您的默认文本对齐（通常是左对齐）

Answer 2

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

fiddle

Answer 3

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

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

为什么 img 不居中？

why isn't the img centering?

css

image