CSS - неправильно выровнять изображение по центру

Question

CSS - неправильно выровнять изображение по центру

0

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

Спасибо за чтение :)

Jordan Jones 10 нояб. 2013, в 18:35

Источник

0

занять некоторое время, чтобы рассмотреть вклад каждого
Deryck 10 нояб. 2013, в 18:17

Теги:

html

css

4 ответа

0

Ваш код уже довольно близок, так как ваши .head уже заблокированы, а ваш #header - text-align: center. То, что вы хотите сделать, это удалить offset2 и изменить span8 на span12 чтобы он охватывал всю ширину.

James Lai 10 нояб. 2013, в 15:20

0

У div содержащего изображения, должны быть

margin: 0 auto;

и блоки изображения должны иметь:

float: none;
display: inline-block;

Deryck 10 нояб. 2013, в 15:01

0

Встроенный блок крайне несовместим во всех браузерах, особенно при работе с пробелами. Поплавки не должны быть использованы или очищены либо.
helion3 10 нояб. 2013, в 18:04
0

Я поставил float: none потому что он устанавливает float: left как 80 раз в своем коде, когда ему это не нужно. А что касается inline-block , я не уверен, что заставляет вас думать, что он несовместим во всех браузерах: caniuse.com/inline-block, но, честно говоря, я бы сразу сказал ему заменить <div> с <img> на <span> или просто не оборачивайте это вообще.
Deryck 10 нояб. 2013, в 18:15
0

inline-block совместим с последними браузерами, но может быть проблематичным из-за проблем с пробелами. Теперь это не проблема с трюками font: 0 , но использование трюков - не мое любимое занятие.
helion3 10 нояб. 2013, в 18:24
0

Гоча, я еще не сталкивался с этим, но я начинаю исследовать это сейчас, спасибо
Deryck 10 нояб. 2013, в 18:26
0

это действительно хромает, смеется Пробелы в html могут отображаться как фактические пробелы между элементами в макете. Как дополнение, которое вы никогда не устанавливаете
helion3 10 нояб. 2013, в 18:27

Показать ещё 3 комментария

-1

Я видел это в вашем CSS и HTML-коде, если вы его удалите (только CSS) останется в центре.

HTML

<div class="span8 offset2">

</div>

CSS

Before
.offset2:first-child {
    margin-left: 17.094%;
}
After
.offset2:first-child {
   /* margin-left: 17.094%;*/
}

LinGCode 10 нояб. 2013, в 15:04

0

это похоже на загрузочный код, и изменение поведения классов смещения вызовет дальнейшие проблемы в будущем. ни один класс не нужен в этом случае
helion3 10 нояб. 2013, в 18:05

Ещё вопросы

занять некоторое время, чтобы рассмотреть вклад каждого
Встроенный блок крайне несовместим во всех браузерах, особенно при работе с пробелами. Поплавки не должны быть использованы или очищены либо.
Я поставил float: none потому что он устанавливает float: left как 80 раз в своем коде, когда ему это не нужно. А что касается inline-block , я не уверен, что заставляет вас думать, что он несовместим во всех браузерах: caniuse.com/inline-block, но, честно говоря, я бы сразу сказал ему заменить <div> с <img> на <span> или просто не оборачивайте это вообще.
inline-block совместим с последними браузерами, но может быть проблематичным из-за проблем с пробелами. Теперь это не проблема с трюками font: 0 , но использование трюков - не мое любимое занятие.
Гоча, я еще не сталкивался с этим, но я начинаю исследовать это сейчас, спасибо
это действительно хромает, смеется Пробелы в html могут отображаться как фактические пробелы между элементами в макете. Как дополнение, которое вы никогда не устанавливаете
это похоже на загрузочный код, и изменение поведения классов смещения вызовет дальнейшие проблемы в будущем. ни один класс не нужен в этом случае

helion3 · Accepted Answer · 2013-11-10T14-36-00.000Z

0

Лучший ответ

Вы обертываете изображения в div span8 offset2 div, который не предназначен для поддержания их в центре, но для сохранения элемента с заданной шириной/смещением влево.

Попытка установить этот родительский div следующим образом:

#showcase.row-fluid > div { margin: 0 auto; width: 612px }

helion3 10 нояб. 2013, в 14:36

0

это просто заставляет все изображения идти в сторону: я
Jordan Jones 10 нояб. 2013, в 17:27
0

Я сам проверил, все отлично работает.
helion3 10 нояб. 2013, в 18:03
0

Можете ли вы JSFiddle это для меня, пожалуйста?
Jordan Jones 10 нояб. 2013, в 18:07
0

Было бы трудно бросить туда полную страницу. Все, что вам нужно сделать, это удалить классы span8 и offset2 из div, содержащего изображения, а затем использовать css, который я дал вам, чтобы контролировать его ширину.
helion3 10 нояб. 2013, в 18:08
0

это почти все, что я сделал, попробую еще раз, но на данный момент посмотрите, как выглядит страница: I
Jordan Jones 10 нояб. 2013, в 18:10
0

Ну, я сделал то, что вы сказали мне сделать, но теперь, когда вы слишком много свернули экран, одно изображение все равно переполняется:
Jordan Jones 10 нояб. 2013, в 18:18
0

Я обновил страницу с вашими примерами, и когда я сужаю окно браузера, изображения исчезают, когда страница становится слишком узкой. Я не вижу переполнения.
helion3 10 нояб. 2013, в 18:19
0

Это означает, что вы максимизировали лол. попробуйте другой способ.
Jordan Jones 10 нояб. 2013, в 18:23
0

Установите масштаб на 33%
Jordan Jones 10 нояб. 2013, в 18:25
0

Я знаю разницу между максимизацией и минимизацией ... d.pr/i/umQx
helion3 10 нояб. 2013, в 18:25

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