Question

我有一个元素，我试图使用

margin = 0 auto;

然而，当我在浏览器中检查页面时，边距不会显示。有关如何解决此问题的任何建议？

    #main{
     margin: 0 auto;
     width: 100%;
    }

    <div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
    </div>

Answer 1

您正尝试将宽度为100％的div居中设置边距。问题是当div占据整个宽度时，没有余量空间。

使用较窄的div，您会看到居中生效。

#main{
     margin: 0 auto;
     width: 70%;
     border: 1px solid black;
     padding: 10px;
}

<div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
    </div>

然而，更加强大的定心方式是flexbox

#main{
  display: flex;
  flex-flow: column;
  align-items: center;
}

<div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <br>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
</div>

Answer 2

如果将div及其子元素居中集中，那么请尝试将text-align: center;添加到#main { ... }

#main{
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

<div id="main">
  <div id="heading">
    <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
    <button class="head head2 font" href="" id="hb1">Guitar</button>
    <button class="head head2 font" href="" id="hb2">Bass</button>
    <button class="head head2 font" href="" id="hb3">Piano</button>
    <button class="head head2 font" href="" id="hb4">Drums</button>
    <i class="fa fa-bars menu"></i>
  </div>
  <div id="div-mi1">
    <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
    <h2 id="mt1" class="font">Test</h2>
  </div>
</div>

保证金不会改变<div>元素

2 个答案: