我很难强迫DIV包含一组图像,每个图像都包含在DIV中,以便在我的响应元素中居中。我试图为主DIV提供100%的宽度,并在图像DIV上同时使用clear和float的混合,但我似乎无法让它们完全让步。我知道我很亲密,但找不到我所缺少的东西。这就是我所拥有的:
<footer>
<div id="Follow-Us"><p>Follow us on:</p></div>
<div id="social">
<!--<div id="left-social-spacer"></div>-->
<div id="FB">
<img src="Images/FB.jpg" />
</div>
<div id="Tweet" style="margin: 0 auto">
<img src="Images/Twitter.jpg" />
</div>
<div id="WP" style="margin: 0 auto">
<img src="Images/WordPress.jpg" />
</div>
</div><!-- end social -->
</footer>
<div id="safety"></div>
</article>
<hr />
<div id="Unsubscribe"><p>Not interested in email updates? <a href="mailtocontent" target="_blank">Unsubscribe here</a>. Click <a href="http://www.content.com/">here</a> to subscribe.
<br /><br />To ensure that subscription newsletters make it to your inbox, add <a href="mailtocontent"><!--info@content.com--></a> to your address book.</p>
</div>
这是正常和响应式设计在运行时的样子:
这是我控制它的CSS:
#FB
{
float: right;
/*position: relative;*/
margin: 0 auto;
background-color: blue;
}
#Tweet
{
float: left;
/*position: relative;*/
margin: 0 auto;
background-color: fuchsia;
}
#WP
{
float: left;
/*position: relative;*/
margin: 0 auto;
background-color: hotpink;
}
#social div
{
background-color: yellow;
height: 57px;
margin: 0 auto;
position: relative;
float: left;
}
#left-social-spacer
{
width:90%;
/*background-color: #ff0000;*/
height: 37px;
float: left;
margin-left: 59px;
}
footer
{
/*background-color: #003E79;*/
height: 37px;
display: block;
}
#Follow-Us p
{
clear: left;
float: left;
width: 100%;
text-align: center;
}
#LowNavBar p
{
clear: left;
float: left;
width: 100%;
text-align: center;
}
#Copyright p
{
clear: left;
float: left;
margin-top: -15px;
width: 100%;
text-align: center;
}
#safety
{
clear: both;
/*background-color: #ee7799;*/
width: 100%;
/*height: 50px;*/
}
.no_anchor_styles
{
text-decoration: none;
cursor: pointer;
}
#read-more
{
border-radius: 5px;
border: none;
background-color: red;
color: white;
}
我在这里错过了什么,或者我添加的是什么,不应该在这里阻止我控制DIV强迫他们到中心?
答案 0 :(得分:1)
public static int DoStuff(int num1,int num2)
父母和text-align-center
社交图标。
示例:
display:inline-block
.main {
text-align: center;
}
.in {
display: inline-block;
}
答案 1 :(得分:0)
这是更改,您必须在代码中将footer
与social
对齐。
#FB
{
float: left; /*Float towards left not right*/
margin: 0 auto;
background-color: blue;
}
#social
{
background-color: yellow;
height: 57px;
margin: 0 15px;
position: relative;
float: left;
width:60px;
}
footer
{
/*background-color: #003E79;*/
height: 110px;
display: block;
width:90px;
margin:auto;
}