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

现象如下：

	<div class="children">
						<div class="wrap">
							<ul>
								<li class="product">
									<a href="#">
										<img src="./images/miphone1.jpg">
										<p>小米手机</p>
									</a>
								</li>
                           </ul>
                       </div>
  </div>

#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属性。