Html 设置中心位置的 margin-left 和 margin-right
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18100023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
margin-left and margin-right for Setting Center position
提问by
I want to set the center the .user-menuposition, but my code below isn't working. How can I solve this?
我想设置中心.user-menu位置，但我下面的代码不起作用。我该如何解决这个问题？
HTML
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
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;
}
回答by Kevin Bowersox
Give the .user-menua width, currently it is a block element so it will fill its container. This causes the user-menuto expand to 100% width across the page, which technically is centered, you just don't notice it.
给.user-menu一个宽度，目前它是一个块元素，所以它将填充它的容器。这会导致在user-menu整个页面上扩展到 100% 宽度，技术上是居中的，您只是没有注意到它。
.user-menu {
margin-left:auto;
margin-right:auto;
width: 100px;
}
回答by Falguni Panchal
make this
做这个
CSS
CSS
.user-menu {
margin-left:auto;
margin-right:auto;
width:50%;
}
回答by VIVEK-MDU
回答by Elegant Coder
Use this class instead of your .user-menu class
使用这个类而不是你的 .user-menu 类
.user-menu {
margin:0 auto;
width:300px;
}
Or just add Width to your .user-menu class. That will do the trick for you.
或者只是将 Width 添加到您的 .user-menu 类。这将为您解决问题。
JSFiddle: Working Sample.. Click Here
JSFiddle： 工作示例.. 点击这里
回答by Douglas Rivera
For this you need to give the width of a tag
为此，您需要给出标签的宽度
.user-menu {
margin-left: auto;
margin-right: auto;
width: 100px;
}
