css样式设置元素无法居中(上个问题没描述清楚) 5C

图片说明![![图片说明](https://img-ask.csdn.net/upload/201808/15/1534343997_315730.png)图片说明](https://img-ask.csdn.net/upload/201808/15/1534343989_740403.png)图片说明

css

6个回答

上下边距问题,你可以通过这几个个样式去调整,margin-top margin-bottom padding-top padding-bottom
对于图片还可以通过background-position 来设置上下的位置。如果这几个样式不懂,打开w3s school分分钟明白,教你代码不如教你方法,自己研究出来的
好过别人赠与的

图片说明

图片说明

我觉得这种最好用一个弹性盒把想要居中的元素包住,然后用盒子的方式居中。
举个例子:

要居中的元素

.center {
display: flex;
justify-content: center;//主轴居中(默认水平)
align-items: center;//另外一个轴居中
height: 100vh;//根据实际情况调整
width: 100vw;//根据实际情况调整
}

NullPointer0
NullPointer0 div被吞了 ‘<div class="center"> <div >要居中的元素</div> </div>’
一年多之前 回复

1,这里完全不需要用定位,
2,你用margin: 0 auto;只能左右居中,
3. 试着改一下

 .icon-img-content{
        ......
        transform: translateY(高度的一半)
 }

你是想要让img上下居中吗,试试这个
.icon-img-content{
vertical-align: middle;
}
或者
.icon-img{
position: relative;
}
.icon-img-content{
position: absolute;
//上下左右都居中,左右不居中的话去掉left,然后改 translate(0, -50%)
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
}

qq_39580459
沙雨_ 喔 抱歉 没注意上面贴的代码是你的,根据你写的 用我说的第二种,.icon-img{ position: relative;width:50px; }然后img标签用我上面的代码,你写的都不要了,对了 img最好加上width:100%,毕竟不知道img原始宽度
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问