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

￡神魔★判官ぃ 2023-10-15 20:13 57阅读 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 条评论，57人围观）

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

相关阅读

相关 html的格式化标签和图片(img)标签

格式化标签和img标签的学习

浅浅的花香味﹌/ 2024年05月06日 21:21/ 0 赞/ 84 阅读

相关 img水平垂直居中

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

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

相关解决a标签内容中img标签和p标签垂直方向间隔太大的问题

现象如下： ![9c21a7eec27b4f939768ad6a9df6def2.png][] 对应的html结构： ![b99770200ce4488dbb5e7d0c

矫情吗；*/ 2023年10月15日 20:51/ 0 赞/ 51 阅读

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

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

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

相关关于照片（img）的水平居中和垂直居中

本文主要是讲述照片（img）的水平居中和垂直居中，但是其他元素的水平居中和垂直居中也可借鉴此文。水平居中： 1.将img元素设置成块级元素 img {

短命女/ 2023年10月02日 18:17/ 0 赞/ 16 阅读

相关 HTML a标签设置水平左右对齐

　　第一步：将行内标签转化成块级元素，即display:block；　　第二步：文字左右对齐，即text-align:left； or text-align:ri

叁歲伎倆/ 2023年02月18日 14:25/ 0 赞/ 18 阅读

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

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

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

相关 img标签

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

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

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

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

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

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

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

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