1

我试图在较大的黑色 div中居中两个 div (#about和)。#testimonial-snippets我怎样才能做到这一点？

JS 小提琴：http: //jsfiddle.net/DgtqM/

HTML

<footer>
        <div id="footer-section">
            <section id="about">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <p>Lorem ipsum dolor sit amet. Find him on <a href="http://twitter.com" target="_blank">Twitter</a> and <a href="http://instagram.com" target="_blank">Instagram</a>. <a id="slide-toggle" href="#">Contact</a> | <a href="">Archive</a></p>
            </section>
            <section id="testimonial-snippets">
                <a href="http://twitter.com" target="_blank"><img class="profile-photo" src="http://dummyimage.com/42x42/000/fff" alt="profile" height="44" width="44"></a>
                <div class="snippet">
                    <p>This is a testimonial.</p>
                    <a class="read-testimonial" href="/testimonials">read more</a>
                </div>
            </section>
        </div>
</footer>

CSS

footer {
background: #222;
clear: both;
color: #f4f3f1;
float: left;
padding: 50px 0;
width: 100%;
}
#footer-section {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 940px;
}
footer section {
float: left;
width: 300px;
}
#about {
margin-right: 20px;
}
footer a {
border-bottom: 1px dotted #f4f3f1;
color: #f4f3f1;
}
.profile-photo {
border: 1px solid #f4f3f1;
float: left;
margin: 4px 10px 10px 0;
}
p {
margin: 0 0 1em;
}
4

2 回答 2

3

我允许自己将这个问题减少到最低限度的标记。其他一切都与问题无关，只会让人更难理解。

<footer>
    <section id="about">About</section>
    <section id="testimonial-snippets">Testimonial</section>
</footer>

一种解决方案是制作这些部分inline-block元素并将它们放在页脚的中心：

footer {
    background: #222;
    padding: 50px 0;
    width: 100%;
    text-align: center;
}
footer section {
    width: 300px;
    height: 50px;
    display: inline-block;
    text-align: left;
}
/* Just coloring the different divs */
#about { background: red; }
#testimonial-snippets { background: green; }

http://jsfiddle.net/DgtqM/6/

于 2013-04-22T09:36:27.070 回答
0

将元素包装在一个新的 div 中。然后给新的 div 一个固定的宽度并margin: 0px auto用于样式。

HTML

<div id="footer-section">
   <div class="wrap">
    <section id="about">
      <!--Content -->
    </section>
    <section id="testimonial-snippets">
      <!--Content-->
    </section>
   </div>
</div>

CSS

.wrap{
    width: 620px;
    margin: 0px auto;
    overflow: auto;
}

示例 http://jsfiddle.net/DgtqM/5/

于 2013-04-22T09:33:00.560 回答