gpt4 book ai didi

html - 设置中心位置的 margin-left 和 margin-right

转载 作者:太空狗 更新时间:2023-10-29 13:41:59 25 4
gpt4 key购买 nike

我想将中心设置为 .user-menu 位置,但我下面的代码不起作用。我该如何解决这个问题?

HTML

<body>
<div class="user-menu">
<div class="menu-items">
<div class="bought-tickects centered hover-effect"></div>
<label>تاریخچه خرید</label>
</div>
<div class="menu-items">
<div class="profile centered hover-effect"></div>
<label>حساب کاربری</label>
</div>
<div class=""></div>
</div>
<div class="clear"></div>
<div class="container-of-selected">
</div>
</body>

CSS

* {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}

.centered {
margin-left: auto;
margin-right: auto;
}

.menu-items {
float: left;
height: 90px;
margin-left: 10px;
margin-right: 10px;
}

.profile {
width: 72px;
height: 72px;
padding-left: 10px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-image: url('Images/folder-contacts-icon.png');
border-radius: 5px;
}

.bought-tickects {
width: 72px;
height: 72px;
padding-left: 10px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-image: url('Images/tickets-icon.png');
border-radius: 5px;
}
.clear {
clear:both;
}
.user-menu {
margin-left:auto;
margin-right:auto;
}

最佳答案

.user-menu 一个宽度,目前它是一个 block 元素,所以它会填充它的容器。这会导致 user-menu 扩展到整个页面的 100% 宽度,这在技术上是居中的,您只是没有注意到它。

.user-menu {
margin-left:auto;
margin-right:auto;
width: 100px;
}

关于html - 设置中心位置的 margin-left 和 margin-right,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18100023/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com