更改一个元素的CSS会影响div之外的其他元素
问题描述:
每当我尝试向上或向下移动分隔符时,上面的.separator类中的元素h1都会随分隔符一起移动。有没有简单的方法来摆脱这个问题?更改一个元素的CSS会影响div之外的其他元素
下面是我的HTML/CSS代码
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
<a href="#">Call to action</a>
</div>
</div>
</div>
</div>
答
\t .banner img {
\t width: 100%;
\t height: 100%;
\t position: relative;
\t }
\t .banner {
\t position: relative;
\t margin: -0.6%
\t }
\t .OverLay {
\t position: absolute;
\t left: 0;
\t right: 0;
\t bottom: 0;
\t top: 0;
\t }
\t .OverLayContent {
\t width: 100%;
\t height: 100%;
\t display: table;
\t }
\t .overLayDescription {
\t width: 70%;
\t margin: 0 auto;
\t }
\t .OverLayText {
\t width: 100%;
\t height: 100%;
\t display: table-cell;
\t vertical-align: middle;
\t text-align: center;
\t vertically-align:middle;
\t }
\t .OverLayText h1 {
\t margin-bottom: 5%;
\t color: #FFF;
\t font-size: 120px;
\t /*border-bottom: 2px solid #15a4fa;*/
\t }
\t .separator {
\t /*margin: 0 auto;*/
\t width: 50%;
\t background-color: #15a4fa;
\t height: 2px;
\t /*top: 80%;*/
\t position: relative;
\t margin: auto;
\t text-align: center;
\t display: block;
\t }
\t .OverLayText a {
\t color: #FFF;
\t border: 1px solid #15a4fa;
\t padding: 10px;
\t }
\t .OverLayText p {
\t color: #FFF;
\t margin-top: 2%;
\t margin-bottom: 3%;
\t }
\t .OverLayContent {
\t position: relative;
\t }
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
<a href="#">Call to action</a>
</div>
</div>
</div>
</div>
答
仅仅因为你正在使用.OverLayText
到vertically-align:middle;
。
更简单将使用*'pseudo' *元素[**的jsfiddle **](https://jsfiddle.net/vivekkupadhyay/eLuLo6be) – vivekkupadhyay
'.OverLayText'在移动'.separator'时正在增长/缩小。这就是为什么STRICT也在移动。 –
谢谢@SohaibMohammed和Kilian Stinson的帮助。您的意见帮助我了解我的错误。 –