导航栏上的图像徽标CSS;中心定位

pobjuy32  于 2023-03-14  发布在  其他
关注(0)|答案(2)|浏览(116)

导航栏上的图像徽标CSS;中心定位

大家好,我正在为自己做一个项目,作为一个技能的提高。所以有一个问题,我正在编辑的图像为标志的导航栏与中心的位置,我正在使用HTML与类从CSS,这里是语法。

<div class="navbar-logo-header">
<img src="uis-logo.png" alt="uis-logo">
</div>
.navbar-logo-header {
    width: 10px;
    height: 3px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

结果是位置不能根据我想要的图像灵活调整,我已经给了其他的属性和值,结果还是失败和崩溃。也许可以根据我想要的以附加类属性和值的形式给我提示?我非常感谢帮助。
这就是结果:https://urlis.net/9pvgrmzk
我希望它能有所帮助,并根据我的期望,标志的位置是灵活的,红线匹配我提供的图片。

0x6upsns

0x6upsns1#

使用显示块

右边距自动和左边距自动应该应用于图像的子元素或图像周围的单独div。
请记住,要居中显示块元素,元素必须具有定义的宽度和高度

使用显示伸缩此外,将显示伸缩与对齐内容中心和对齐项居中于父元素一起使用会更容易。

.navbar-logo-header {
    width: 10px;
    height: 3px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
kmb7vmvb

kmb7vmvb2#

.navbar-logo-header{
   margin: 0 auto;
    }

相关问题