将3列页脚居中

Question

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

我不想使用表格，据我所知，这不应该是一个大问题。 但是我仍然有麻烦。 如果您想查看完整的HTML，这是CSS和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>

Answer 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>

Answer 2

参见此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;
}

Answer 3

这将为您做到。

只需创建一个容器div，然后使用margin auto以固定宽度将其居中。

<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>

每当需要将单个块居中对齐时，都需要获取一些东西以将它们全部包装在一起并居中。