Как централизовать детские DIVS, содержащие UL?

Question

Как централизовать детские DIVS, содержащие UL?

0

Я создаю нижний колонтитул, но у меня возникают проблемы с получением 4 div, которые содержат ссылки на различные страницы для централизации. На Dreamweaver он ведет себя правильно, но как только я загружу его или протестирую его на JSFIDDLE, он децентрализован.

В идеале я хочу, чтобы это выглядело так, с каждым из "разделенных" divs в нижнем колонтитуле:

        Random information above the divs below (displayed center of footer)

                 Product      Company      Etc....        Contact

                 link         link

                 link         link

И так далее.

У меня есть демо, в котором есть полный код: http://jsfiddle.net/NkFe9/3/

Вот некоторые из CSS:

/*global footer settings*/
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;

background-image:url(../img/index/footer/pixelpatterns.png);
background-repeat:repeat;

}


#insidefooter {
margin-top: 20px;
text-align: center;
}

/*settings for social media buttons*/
#insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;

}

 #insidefooterone h5, #insidefootertwo h5, #insidefooterthree h5, #insidefooterfour h5 {
text-align:left;
margin-bottom: 0;
color:#FFFFFF;
}

 #insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#insidefooterone li, #insidefootertwo li, #insidefooterthree li, #insidefooterfour li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
}

#disclaimer {

margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}

#disclaimer p {
text-align:center;
color: #C9C9C9;
}

спасибо

ben_dchost 28 апр. 2014, в 11:55

Источник

0

Просто быстрый комментарий, не верьте дизайну Dreamweaver. Всегда
Ruddy 28 апр. 2014, в 09:10
0

Я полагаю, вы хотите что-то вроде этого: jsfiddle.net/NkFe9/3
Aditzu 28 апр. 2014, в 09:13
0

@Ruddy Радужный урок усвоил трудный путь!
ben_dchost 28 апр. 2014, в 09:17
0

@ben_dchost Когда я начал веб-разработку, я сделал то же самое!
Ruddy 28 апр. 2014, в 09:18
0

@Aditzu именно так я хочу, чтобы заголовок и div совпадали. Но как сделать так, чтобы элементы div были центральными в нижнем колонтитуле, а не слева?
ben_dchost 28 апр. 2014, в 09:18
0

@Ruddy Радди, это действительно обманчиво! Можно ли использовать предварительный просмотр в браузере для обратной связи?
ben_dchost 28 апр. 2014, в 09:21
0

@ben_dchost Да, всегда смотрите на это в браузере.
Ruddy 28 апр. 2014, в 09:22
0

jsfiddle.net/NkFe9/4 Я добавил две обертки, чтобы сделать трюк. Я надеюсь, что это хотите, вы хотите;)
Aditzu 28 апр. 2014, в 09:30

Показать ещё 6 комментариев

Теги:

html

css

footer

1 ответ

Ещё вопросы

Просто быстрый комментарий, не верьте дизайну Dreamweaver. Всегда
Я полагаю, вы хотите что-то вроде этого: jsfiddle.net/NkFe9/3
@Ruddy Радужный урок усвоил трудный путь!
@ben_dchost Когда я начал веб-разработку, я сделал то же самое!
@Aditzu именно так я хочу, чтобы заголовок и div совпадали. Но как сделать так, чтобы элементы div были центральными в нижнем колонтитуле, а не слева?
@Ruddy Радди, это действительно обманчиво! Можно ли использовать предварительный просмотр в браузере для обратной связи?
@ben_dchost Да, всегда смотрите на это в браузере.
jsfiddle.net/NkFe9/4 Я добавил две обертки, чтобы сделать трюк. Я надеюсь, что это хотите, вы хотите;)

Sowmya · Accepted Answer · 2014-04-28T08-10-00.000Z

Попробуйте добавить padding:0 до ul

#insidefooterone ul, #insidefootertwo ul, #insidefooterthree ul, #insidefooterfour ul{
    list-style: none;
    text-align: left;
    margin-left: 0;
    color: #C9C9C9;
    padding:0
    }

DEMO

И не судите о выходе, основанном на дизайне Dreamweaver Design. Всегда предпочитайте проверять браузер.

Вам нужно использовать margin:0 auto чтобы выравнивать центр div. margin:0 auto wont не имеет значения с float:left. Поэтому вам нужно устранить float: слева от родительского div.

И попробуйте добавить родительский div к ссылкам ul чтобы его легко было выровнять. Обновленная демоверсия

Спасибо за ваш ответ. Это одна из проблем, но как мне централизовать div в нижнем колонтитуле?
На самом деле в вашем коде гораздо больше изменений. Обновите ответ с новой версией DEMO, которая поможет вам определить изменения.