html - Margin 0 Auto block 适用于 50% 但不适用于 100%

标签 html css

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

显示属性未在直接父级 div 中定义。它是在父级的父级中定义的,但是将其更改为 block 似乎并没有改变任何东西。有什么原因我不能通过这种技术使用宽度 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;
}

最佳答案

margin: 0 atuo 仅适用于宽度不是 100% 的元素... auto 部分将左右边距设置为 auto,它给你居中的效果。如果宽度为 100%,auto 的边距将不会执行任何操作。

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

关于html - Margin 0 Auto block 适用于 50% 但不适用于 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30713623/

相关文章:

javascript - 图形按钮上的持久 CSS3 过渡效果

html - 滚动时文本溢出省略号在 Chrome 和 IE 中不显示溢出内容

php - 加入 2 个 SQL 表并显示在 1 个 PHP 表中

html - 带底线的 CSS3 三 Angular 形

javascript - HTML 图像未加载(自动添加内联 css 和属性)

javascript - 重新加载页面后图像未加载

html - 如何获取 HTML 表中 td 特定值的列索引

javascript - Document 和 document 和有什么不一样?

javascript - 检测过渡端的属性

HTML+CSS : Equal distance between footer nav elements without using table