为什么保证金财产不起作用？

时间：2018-01-31 06:59:37

标签： html css margin

我想在水平和垂直方向上将类按钮的内容对齐到中间。我使用了 margin: auto 属性，但它垂直对齐文本但不是水平对齐。我知道可以使用text-align属性或display:flex来提高效率。但我在这里只需要一个理由来解释为什么margin: auto属性不起作用。我＆＃ 39; m添加下面的片段。谢谢。

注意这里它的工作正常，水平不能正常工作。那么如何重复不能垂直工作？

＆＃13;
＆＃13; 
#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}
＆＃13; 
<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

我知道可以使用 text-align:center;

完成

＆＃13;
＆＃13; 
    #main-body{
        width: 100%;
        height: 95%;
        box-sizing: border-box;
        background: yellow;
    }

    #title-container{
        width:100%;
        height: 10%;
        background: red;
    }

    #button-container{
        width:100%;
        height: 10%;
        background-color: blue;
        text-align:center;
        
    }

    #data-container{
        padding: 5px;
        box-sizing: border-box;
        background-color: blueviolet;
        
    }

    .btn{
        width:25%;
        height: 100%;
        border: 1px solid black;
        /*margin:auto;*/
        float:left;
        box-sizing: border-box;
        /*margin:0px;*/
    }
    .btn-text{
        margin:auto;
        /*float:none;*/
        color: #ffffff;
    }
＆＃13; 
<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

它也可以与 display:flex;

一起使用

＆＃13;
＆＃13; 
#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
    display:flex;
    align-content:center;
    justify-content:center;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
    display:flex;
    align-content:center;
    justify-content:center;
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}
＆＃13; 
<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

据我所知，保证金影响元素而非内容。如果设置margin：0 auto;它会将元素放在父元素的中心。

答案 1 :(得分：0)

这里你应该注意的事情很少。

  1. 内容无法使用margin：auto;
    2. 垂直对齐
  2. 要垂直对齐内容，您需要使用其他一些方法，例如垂直对齐或使用flexbox模型等。
  3. 如果你想使用margin：auto？水平对齐内容？那么元素的宽度不应超过内容宽度。
  4. 如果元素内的内容需要水平居中对齐，则只需使用text-align：center;

    5. 有关CSS边距如何工作的更多参考，请阅读以下说明。

      

    margin CSS属性设置了四边的边距区域   元件。它是一种简写，可以立即设置所有单个边距：   margin-top，margin-right，margin-bottom和margin-left。

    详细说明：https://developer.mozilla.org/en-US/docs/Web/CSS/margin

    只是为了解决现有代码的问题，请查看以下解决方案。

    <强> CSS

    类名从.btn-text更改为.btn-txt 

    DECLARE @XmlFile XML

SELECT @XmlFile = BulkColumn  
FROM OPENROWSET(BULK 'C:\Temp\GeoDynamics\Downloads\aanbest.xml', SINGLE_BLOB) x;

INSERT INTO Aanbest(ID, ReceiptLimitDate, attachment1,attachment2,attachment3)
SELECT 
    ID = resource.value('(ID)[1]', 'varchar(50)'),
    ReceiptLimitDate = resource.value('(ReceiptLimitDate)[1]', 'varchar(50)'),
    Attachment1 = resource.value('(@Attachment)[1]', 'varchar(50)'),
    Attachment2 = resource.value('(@Attachment)[2]', 'varchar(50)'),
    Attachment3 = resource.value('(@Attachment)[3]', 'varchar(50)')

FROM
    @XmlFile.nodes('//SelectedPublications/Publication') AS XTbl1(resource)
WHERE
   NOT EXISTS (SELECT a.id FROM Aanbest a
              WHERE resource.value('(ID)[1]', 'varchar(50)') = a.id)

答案 2 :(得分：0)

结帐此答案https://stackoverflow.com/a/35817140/2724173您的孩子必须有宽度才能正常工作margin:auto

尝试为.btn-txt提供宽度，即40px您的班级中的拼写错误是btn-txt，而您的css选择器是.btn-text

＆＃13;
＆＃13; 
#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-txt{
    margin:10px auto;
    /*float:none;*/
    color: #ffffff;
    width:40px;
}
＆＃13; 
<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题