малко помощ за хоризонтално центриране на няколко дива

[Kiril]

Здравейте!

Нещо започнах да се отчайвам!!! От един час се опитвам чрез CSS да центрирам 4-5 дива подредени един до друг в една линия. Искам да ги накарам да стоят винаги по средата на екрана. Като на прикачената картинка, но НЕЩЕ ДА ЩЕ на сайта ТУК! Става въпрос за боксовете под заглавието UPCOMING EVENTS.
Явно има нещо друго, което бърка нещата. Може ли някой CSS нинджа да погледне.
Благодаря!

 

[Torbalan Trolski]

От: малко помощ за хоризонтално центриране на няколко дива

Ако искаш да ги редиш хоризонтално сложи на

events_list_home float: left;

и ги загради в един див със зададена ширина спoред тази на екрана и margin: 0px auto;

 

[bobbydigital]

От: малко помощ за хоризонтално центриране на няколко дива

допълни на контейнера: white-space: nowrap;

 

[Kiril]

От: От: малко помощ за хоризонтално центриране на няколко дива

сложи в контейнера: white-space: nowrap;

Не стана с това.

Сега ще пробвам по начина на Torbalan Trolski.

 

[bobbydigital]

От: малко помощ за хоризонтално центриране на няколко дива

е как не става: https://jsfiddle.net/p1z8mtqt/

 

[Torbalan Trolski]

От: малко помощ за хоризонтално центриране на няколко дива

http://jsfiddle.net/unclego/Lkjyncvg/

 

[Kiril]

От: малко помощ за хоризонтално центриране на няколко дива

Да, по начина на Torbalan Trolski става , но ако искам да е респонсив работата? В смисъл .container-inner да с променлив width%? Боксовете в него (.container) са с фиксиран width, но винаги да се центрират без значение броя им. Ако са повече бройки може да отиват отдолу на втори ред но да са центрирани?!

 

[Torbalan Trolski]

От: малко помощ за хоризонтално центриране на няколко дива

Да, по начина на Torbalan Trolski става , но ако искам да е респонсив работата? В смисъл .container-inner да с променлив width%? Боксовете в него (.container) са с фиксиран width, но винаги да се центрират без значение броя им. Ако са повече бройки може да отиват отдолу на втори ред но да са центрирани?!

и ги загради в един див със зададена ширина спoред тази на екрана

@media only screen and (min-width: XXXpx) and (max-width: YYYpx) {
    .container-inner {
        width: ZZZpx;
    }
}

 

[lglgl]

От: малко помощ за хоризонтално центриране на няколко дива

По-принцип не слагай широчината във фискирани размери, работи със % и em-ове.

 

[Torbalan Trolski]

От: От: малко помощ за хоризонтално центриране на няколко дива

По-принцип не слагай широчината във фискирани размери, работи със % и em-ове.

Защо не погледнеш bootstrap-а как е направен?

 

[lglgl]

От: малко помощ за хоризонтално центриране на няколко дива

Bootstrapa Го знам, със медиа куерита им са зададени фиксирана широчина на контейнери.
Аз имам предвид следна ситуация:
Има 1000Px широчина кутия, и във него искам 4 малки кутий. ПО-логичния вариант ще е да направя по 25%, отколкото по 250px

 

[Torbalan Trolski]

От: малко помощ за хоризонтално центриране на няколко дива

Bootstrapa Го знам, със медиа куерита им са зададени фиксирана широчина на контейнери.
Аз имам предвид следна ситуация:
Има 1000Px широчина кутия, и във него искам 4 малки кутий. ПО-логичния вариант ще е да направя по 25%, отколкото по 250px

А сега помисли какво иска колегата ... Без чиста теория "как е най-правилно".

Има вътрешни "кутиИ", които са с фиксирана широчина. Каква е логиката да задава %?
Идеята е при различните разделителни способности да се се наредят по 4-3-2-1 на ред ...
Т.е. задава се само широчината на контейнера, за да се центрира. Вътрешните елементи и без това са с фиксирана широчина.

 

[lglgl]

От: малко помощ за хоризонтално центриране на няколко дива

А сега помисли какво иска колегата ... Без чиста теория "как е най-правилно".

Има вътрешни "кутиИ", които са с фиксирана широчина. Каква е логиката да задава %?
Идеята е при различните разделителни способности да се се наредят по 4-3-2-1 на ред ...
Т.е. задава се само широчината на контейнера, за да се центрира. Вътрешните елементи и без това са с фиксирана широчина.

Да :arrow:

 

[ROA]

От: малко помощ за хоризонтално центриране на няколко дива

Ей, това CSS винаги е нагодация. И аз що време губя да се мъча да подредя иначе елементарни неща, не е истина.

А пък вие с тия плоски лендинг сайтове, или както и там да се наричат, предупреждавайте. На село съм, мобилния ми нет е ограничен, а напълно безполезни картинки... направо тапети... от по стотици килобайти ми се шмугват ей така. После освен техния смисъл, не мога да разбера и смисъла на сайта и най-предпочитам просто да го затворя и забравя за случилото се

И аз съм Не на "px". С "em" пак са някакви главоболия, затова експериментирам с "rem". Има и някакви "vh" и "vw", добре е да се пробват.

 

[Kiril]

От: малко помощ за хоризонтално центриране на няколко дива

Оправих се за сега. Благодаря!