【发布时间】: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。