解决img标签和p标签不能水平居中对齐的问题

现象如下：

	

						

							

								

									
										
										
小米手机
									
								
                           
                       
  

#nav .product {
  position: relative;
  width: 16.6%;
  text-align: center;
}

可以看到： img标签和p标签的父级容器已经设置了text-align: center; 但是还是没有水平居中对齐。

是什么原因呢。

问了chatgpt，发现：原来img和p标签的margin和padding属性设置会影响水平居中对齐。

然后看了一下css代码，果然是这样：

 解决办法：去掉img标签的margin-left属性，问题解决！

 总结：要实现同一父级元素下的图片和文字水平居中对齐，

img标签和p标签的父级容器除了需要设置text-align: center，img标签和p标签不能有额外的水平方向的margin/padding属性。