为什么img不居中？答案

【问题标题】：why isn't the img centering?为什么img不居中？
【发布时间】：2015-02-02 23:11:42
【问题描述】：

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

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

【问题讨论】：

你试过把text-align: center;放在#add_next上吗？
在 div 和 img 上加一些边框，看看盒子在哪里。可能 img 居中，但 div 是图像的确切大小，因此居中是不可见的。
这里有一个技巧可以解决您现在和将来的问题 - 在浏览器中右键单击您的页面，单击“检查元素”。底部会打开一个窗口。将鼠标悬停在代码的不同部分上，展开它们并检查右列以查看页面各个部分的 CSS

标签： css image

【解决方案1】：

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

fiddle

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：