0

我已经为我的 tumblog 创建了一个 3 列的页脚，但尽管我付出了所有努力，我还是无法将这该死的东西放在中心。

我不想使用表格，据我了解，这应该不是什么大问题。但是我仍然遇到麻烦。这是 CSS 和 HTML 的片段以及博客本身的链接，以防您想查看完整的 HTML。

谢谢你。

完整的 HTML：http: //ilconfess.tumblr.com

CSS：

/* FOOTER */
.footerwrapper {
background-image: url(http://static.tumblr.com/smpx8si/tipmvfm40/footer.jpg);
background-color: #0b0b0b;
background-repeat: no-repeat;
width: 100%;
height: 230px;
margin: 0 auto;
display:block;
}
.footernav_left {
float: left;
width: 200px; 
border: 1px solid;
}

HTML：

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="clear"></div>

4

3 回答 3

1

像这样

给予width并margin:0 auto;创造新的class

html

<div class="footerwrapper">
<div style="width:1004px; margin:0 auto;">


    <div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>
<div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>

    <div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>

    <div class="clear"></div>
</div>
</div>
于 2013-11-11T13:02:25.160 回答
0

看到这个 JSFiddle，您需要将三个 div 包装到另一个容器中，该容器的左右边距设置为 auto 以及设置宽度，然后 footerwrapper 类需要具有text-align:center;. 然后，您也可以取消浮动子容器，而不是使用display:inline-block

HTML

<div class='footerwrapper'>
    <div class='footercenter'>
<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div></div>

CSS：

/* FOOTER */
.footerwrapper {
   background-image: url(http://static.tumblr.com/smpx8si/tipmvfm40/footer.jpg);
   background-color: #0b0b0b;
   background-repeat: no-repeat;
   width: 100%;
   height: 230px;
   margin: 0 auto;
   display:block;
   text-align:center;
}
.footercenter{
   width:700px;
   margin:0 auto;
}
.footernav_left {
   display:inline-block;
   width: 200px; 
   border: 1px solid;
}
于 2013-11-11T13:02:43.643 回答
0

这会为你做的。

只需创建一个容器 div，并使用固定宽度和自动边距将其居中。

<div class="footerwrapper">
<div class="centered">
    <div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>

    <div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>

    <div class="footernav_left">
    <h3>Heading</h3>
    לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
    </div>

    <div class="clear"></div>
  </div>
</div>

<style type="text/css">
.centered {
    margin:0 auto;
    width:600px;
}
</style>

每当您需要将单个块集中在一起时，您需要得到一些东西将它们全部包装成一个，并将其居中。

于 2013-11-11T13:04:06.367 回答