[英]CSS div's containing classes
So my logic of Div ID's and Classes must be WAY off. 因此,我的Div ID和Class逻辑必须保持不变。
Heres whats going on: 这是怎么回事:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container. 如您所见,显示PS不在滑块中心对齐的块(在容器内部。
Here is my css: 这是我的CSS:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html: 这是html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly? 我的理论是我使用的类不正确?
Thanks. 谢谢。
You can Add this to your CSS 您可以将其添加到CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto
can work 有了这个你的
margin:o auto
可以工作
View This Demo http://jsfiddle.net/VGPeW/ 观看此演示http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont
) is the same width as your slider above it. 您需要确保包含的div(在本例中为
frontpage-Button-Cont
)与其上方的滑块的宽度相同。 Then add the property text-align:center
to the container. 然后将属性
text-align:center
到容器中。 That should fix your issue. 那应该解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.