Как вырванять блок по центру?

Question

[Super Star]

Получилось у меня довольно не плохо: https://jsfiddle.net/vh1z41e6/1/ но в промежутке от 320 до 480 пикселей большой промежуток и я не могу установить колонку по центру. Сама колонка липнет к правой части.

Задача сотворить во это


Вот как это выглядит:

Answer 1

[AcidBat]

margin: 0 auto;
Пойдёт такой вариант?

Comments

[Super Star]

wrapper и так по центру стоит, а контент внутри его то есть вот эти блоки я не могу по цент выровнять. даже помощью flex box не ввышло

[AcidBat]

Андрей Рысь: display: block;

[Super Star]

AcidBat: чему? айтемам? там display: inline-block, а враперу это бессмысленно ставить если исспользовать flex box

[AcidBat]

Андрей Рысь: ну display: block это и есть для класса item.

[AcidBat]

Андрей Рысь: и margin: 0 auto 10 auto; также для класса item.

[Super Star]

AcidBat: О_о сорян но я непонмаию что ты хочешь донести мне

[AcidBat]

Андрей Рысь: .item { margin: 0 auto 10 auto; display: block; }
Я сам правил твой репозиторий и вроде бы отображалось нормально.
Могу даже заскринить.

[AcidBat]

Андрей Рысь: storage1.static.itmages.ru/i/16/0807/h_1470595277_...

[Super Star]

AcidBat: всё отлично но тогда едет вёрстка =(

[AcidBat]

Андрей Рысь: где именно и как?

[Super Star]

AcidBat: https://jsfiddle.net/vh1z41e6/2/

[AcidBat]

Андрей Рысь: а какой у вас браузер? У меня всё вполне нормально.

[Super Star]

AcidBat: проверил в хроме и фоксе косяк есть везде как и jsfiddle s46.radikal.ru/i111/1608/bb/27914bd0ea50.jpg

[AcidBat]

Андрей Рысь: полностью скопипастил код из jsfiddle.
Firefox последней версии.
storage5.static.itmages.ru/i/16/0807/h_1470596530_...

[Super Star]

AcidBat: в общем я выкрутился вот так s019.radikal.ru/i608/1608/4c/e774646350c0.jpg
media only screen and (max-width: 479px) {
.item{
margin: 0 auto;
display: block;
margin-bottom: 20px;
}
}

[AcidBat]

Андрей Рысь: можно и в 2 строки.
margin: 0 auto 20 auto;
display: block;

Результат аналогичен.

[Imin]

Андрей Рысь: А reset использовали?Чтобы браузеры свои коррективы не вводили?

[Super Star]

Imin: fult это нужно сделать? и как?

[AcidBat]

Андрей Рысь: у вас css-файл один планируется или несколько?
В-общем, нужно для каждой страницы (или для самого первого css-файла в очереди) указать ссылку на отдельный css-файл, в котором указаны инструкции для отображения всех элементов по умолчанию.

Их можно взять, например, отсюда: denweb.ru/verstka/sbros-stilej-css.html

В-общем, главное требование - они должны быть самыми первыми стилями, которые загрузит браузер. Неважно, как отдельный css-файл или в составе какого-то другого файла.

[Imin]

Imin: Файл называется reset.css или же вот его содержимое:
/* сброс стилей браузера */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em
list-style: square;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* конец кода сброса стилей браузера */

В любом случае, это не помешает, для отображения вашего код во всех браузерах одинаково.
Плюс работа html5 тегов