Question

我有以下div排列，下面是CSS。在线到处似乎都说您需要margin：0自动；居中，但文字仍位于右上角，

任何帮助表示赞赏。

.menu_item {
  margin: 0 auto;
}

<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
  <div id='menu_but' style='width:36px;height:36px;'>
    <div class='menu_line' />
    <div class='menu_line' />
    <div class='menu_line' />
  </div>
  <div id='menu'>
    <div class='menu_item'>HOME</div>
    <div class='menu_item'>ABOUT US</div>
    <div class='menu_item'>CONTACT US</div>
    <div class='menu_item'>PORTFOLIO</div>
  </div>
</div>

Answer 1

首先，<div>不是一个自闭标签，因此您必须编写</div>而不是<div class='menu_line'/>

然后，您可以简单地执行以下操作：

<style>
.menu_item{
    display: inline-block;
}
#menu {
    position: relative;
    text-align: center;
}
</style>

<div id="menu">
    <div class="menu_item">HOME</div>
    <div class="menu_item">ABOUT US</div>
    <div class="menu_item">CONTACT US</div>
    <div class="menu_item">PORTFOLIO</div>
</div>

Answer 2

也许使用flexbox？

.parent {
display:flex;
justify-content:center;
align-items:center;
}

所有子元素都将居中

保证金：0自动;不在div中居中

2 个答案: