Центрирование нижнего колонтитула из 3 столбцов

Question

Центрирование нижнего колонтитула из 3 столбцов

0

Я создал колонку с тремя колонками для моего тумбола, но, несмотря на все мои усилия, я не могу, на всю жизнь, положить эту чертову вещь в центр.

Я не хочу использовать таблицы и, насколько мне известно, это не должно быть такой большой проблемой. Но у меня все еще есть проблемы с этим. Вот фрагмент 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>

user2835569 11 нояб. 2013, в 14:06

Источник

Теги:

html

css

center

nav

footer

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>

Falguni Panchal 11 нояб. 2013, в 10:36

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>

Всякий раз, когда вам нужно сосредоточить отдельные блоки вместе, вам нужно получить что-то, чтобы обернуть их всех в один и центрировать.

Ivo Pereira 11 нояб. 2013, в 10:26

0

Это также сработало, спасибо!
user2835569 11 нояб. 2013, в 21:07

Ещё вопросы

SW4 · Accepted Answer · 2013-11-11T10-53-00.000Z

См. Этот JSFiddle, вам нужно обернуть три divs в другой контейнер, который имеет свой правый и левый край, заданный как автоматически, так и заданную ширину, тогда класс нижнего колонтитула должен иметь text-align:center; , Затем вы также можете отключить witrh, плавающие дочерние контейнеры, вместо этого используя 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;
}