【问题标题】:Margin 0 Auto block works with 50% but not with 100%保证金 0 自动阻止适用于 50% 但不适用于 100%
【发布时间】:2015-06-08 23:53:04
【问题描述】:

它没有将宽度为包含 div 的 100% 的 <h2> 元素居中。在 50% 时它居中很好,但在 100% 时它会紧贴左边缘。

显示属性未在直接父 div 中定义。它是在父级的父级中定义的,但是将其更改为阻止似乎并没有改变任何东西。我有什么理由不能在这种技术中使用 100% 宽度?

编辑

main id="grid">
<section id="main_background_container">
    <img id="main_side_img" src="images/background-1c.png"><img>
    <div id="main_primary_container">
        <div id="main_heading_container">
            <h1 id="main_heading" >INTENSIVAO</h1>
        </div>
        <div id="main_subheading_container">    
            <h2 id="main_subheading">DE INGLES</h2>
        </div>
        <div id="info_primary_container">
            <div id="info_container">
                <div id="info_text_container">
                    <h1 id="info_text_place" class="penis_breath">Paulista</h1>
                    <h2 id="info_text_day" class="penis_breath">Sabados</h2>
                </div>
                <div id="info_time_container">
                    <p class="info_text_time" id="info_text_time_1">8h00 - 11h00</p><br>
                    <p class="info_text_time" id="info_text_time_2">12h00 - 15h00</p>
                </div>
                <div id="info_startday_container">
                    <h2 id="info_text_startday_explain">turmas começam</h2>
                    <h1 id="info_text_startday" class="penis_breath">10 de Maio</h1>
                </div>
            </div>
        <div id="info_box_1"></div>
        </div>
    </div>

CSS

#main_primary_container{
width: 40%
background-image: url('../images/background-2b.png');
background-position: top;
background-size: cover;
height: 65%;
}
#info_primary_container{
float: left;
display: inline-block;
position:relative;
height: 100%;
width: 100%;
}

#info_text_container{
z-index: 2;
position: realtive;
width: 100%;
}

#info_startday_container{
width: 100%;
;
}
#info_text_startday_explain{
    display: block;
    width: 100%;
    margin: 0 auto;
    font-size: 2em;
    color: $binaryColor0;
}

【问题讨论】:

  • 请分享您为此编写的html和css
  • 您有要测试的示例代码吗?
  • 你的意思是这样jsfiddle.net/hzGWk
  • text-align: center 可以帮助你:)
  • 它可以,你是对的。我和其他人这样做了。我只是更喜欢对这个特定元素使用块,而不是 inline-block。

标签: html css


【解决方案1】:

margin: 0 atuo 仅适用于不是 100% 宽度的元素...auto 部分将左右边距设置为 auto,从而为您提供居中效果。如果宽度为 100%,则auto 的边距将不起作用。

如果您想将h2 元素居中,您可以只使用text-align: center

【讨论】:

  • 谢谢。如果宽度设置为 100% 而不是 99%,为什么自动边距不会做任何事情,是否有合理的解释?
  • @AndÚ 因为 100% 宽度的元素在任何一侧都没有任何作用。如果您将边距设置为喜欢50px(某个特定值),那么它将缩小元素,但auto 会查找任一侧可用的边距。一个小元素在每一侧都有足够的余量。另外,如果此答案有帮助,请标记为已接受。
  • 好的,margin: auto 不适用于设置为 100% 的元素,因为没有剩余空间来创建边距。对吗?
猜你喜欢
  • 1970-01-01
  • 2010-09-15
  • 2017-09-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-08-17
  • 1970-01-01
  • 2021-08-11
相关资源
最近更新 更多