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

￡神魔★判官ぃ 2023-10-15 20:13 40阅读 0赞

现象如下：

![4a95ee6e7eb64371999e9e67ed42e0ec.png][]

<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;
    }

![1fc9827399374aaf8a31a45440372849.png][]

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

是什么原因呢。

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

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

![8a256c698c084f41ac34a49cd7bf38be.png][]

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

![fc12f59ab5114e8c9c45f78994a371fb.png][]

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

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

[4a95ee6e7eb64371999e9e67ed42e0ec.png]: https://img-blog.csdnimg.cn/4a95ee6e7eb64371999e9e67ed42e0ec.png
[1fc9827399374aaf8a31a45440372849.png]: https://img-blog.csdnimg.cn/1fc9827399374aaf8a31a45440372849.png
[8a256c698c084f41ac34a49cd7bf38be.png]: https://img-blog.csdnimg.cn/8a256c698c084f41ac34a49cd7bf38be.png
[fc12f59ab5114e8c9c45f78994a371fb.png]: https://img-blog.csdnimg.cn/fc12f59ab5114e8c9c45f78994a371fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，40人围观）

还没有评论，来说两句吧...

相关阅读

相关 img水平垂直居中

div{ position: relative; width: 400px; ...

阳光穿透心脏的1/2处/ 2024年04月17日 18:49/ 0 赞/ 67 阅读

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

现象如下： ![4a95ee6e7eb64371999e9e67ed42e0ec.png][] <div class="children"> <

￡神魔★判官ぃ/ 2023年10月15日 20:13/ 0 赞/ 41 阅读

相关 div中的元素水平居中对齐

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

曾经终败给现在/ 2023年10月14日 20:25/ 0 赞/ 40 阅读

相关 css垂直居中--img p

因为p标签和img居中的方法我知道的不多就放到一起了！ 1.单行文字的居中很简单一个text-align:center; line-hegight: 父级div的高度。

水深无声/ 2022年07月16日 00:13/ 0 赞/ 203 阅读

相关 <p>p>标签字体水平垂直居中

html中p标签字体居中的方法。首先p标签给出宽和高，呈块状显示，水平居中属性text-align: center;垂直居中line-height: px;这里的line-he

系统管理员/ 2022年06月13日 01:36/ 1 赞/ 2680 阅读

相关关于img标签间距问题

[http://www.cnblogs.com/lovelyun/p/4846222.html][http_www.cnblogs.com_lovelyun_p_484622

青旅半醒/ 2022年06月09日 14:29/ 0 赞/ 211 阅读

相关 img标签

<img src="" alt="" title="" /> img标签里面src的值有三种： 1.网上url 2.本地的绝对路径 3.本地的相对路径

ゝ一纸荒年。/ 2022年06月05日 09:47/ 0 赞/ 261 阅读

相关 div里的img图片水平垂直居中（解决）

转记！ [实现div里的img图片水平垂直居中][div_img] [div_img]: https://blog.csdn.net/DreamFJ/article/

红太狼/ 2022年05月19日 04:20/ 0 赞/ 167 阅读

相关 CSS中实现文本、标签水平居中（两种解决方案）

参考[CSS各种居中设置][CSS] 1. 第一种方式是设置`display: block;`，然后设置 `margin: 0px auto;` 2. 第二种方式是设置`

小鱼儿/ 2022年05月13日 14:58/ 0 赞/ 193 阅读

相关小程序view标签水平垂直居中

效果图： ![在这里插入图片描述][20190101153252385.png] test.wxss代码 / 让view标签居中显示 / .bgd{

Love The Way You Lie/ 2022年04月10日 08:59/ 0 赞/ 397 阅读