Как выставить блок по центру в css
Перейти к содержимому

Как выставить блок по центру в css

  • автор:

Как центрировать блоки (div)?

Как центрировать несколько одинаковых, идущих подряд блоков (div)? Если пишем им float:left , тогда они выравниваются по левому краю, если не писать, будут отображаться в столбик.

Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 7 апр 2012 в 15:33
1,936 7 7 золотых знаков 28 28 серебряных знаков 47 47 бронзовых знаков
7 апр 2012 в 16:17
Это не работает, блоки отображаются вертикально, а нужно горизонтально.
7 апр 2012 в 17:26

Опять не то, вопрос внимательнее читайте. Сделал с использованием таблицы вместо внешнего контейнера, а чисто дивами такое чувство что это сделать нельзя.

8 апр 2012 в 6:40
К кому относятся эти комментарии?
8 апр 2012 в 9:20
display: inline-block; — блоки будут вести себя так же, как и изображения.
17 апр 2012 в 9:30

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

HTML:

CSS:

div < text-align: center; >div div

Отслеживать
ответ дан 7 апр 2012 в 16:14
5,017 1 1 золотой знак 26 26 серебряных знаков 53 53 бронзовых знака
это не работает
13 апр 2012 в 15:45
А как же пример?
17 апр 2012 в 7:02

Пример от exec работает. Только там еще прописать надо в каждом блоке float:left, также в основном блоке див (корневом) надо тоже указать:

display: inline-block; text-align:center; 

Нужно все это дело обвернуть в еще один див и указать text-align:center; . Корневых получится два блока и потом уже идут блоки с флоатами.

тут видимо принцип получается такой, что самый первый див с флоатом цыпляется к ближайшему диву и не дает ему ровняться по макету сайта. А вот еще один див корневой самый первый уже не связан с флоатами и ровняется нормально.

Как выставить блок по центру в css

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

Основная проблема при создании макетов – это размещение на странице блоков div и других блочных элементов. Вы хотите, чтобы элементы перекрывались или между ними оставалось пространство? Хотите, чтобы макет был отзывчивым? Это всего лишь несколько вопросов, на которые вам придется ответить при написании кода.

В этом посте мы рассмотрим один из наиболее распространенных вопросов начинающих программистов: как центрировать div в CSS?

Как центрировать Div в CSS

Вы можете центрировать div несколькими способами в CSS. Хотя легко центрировать div по горизонтали на странице, сложнее сделать это по вертикали (но все же управляемо!). Мы рассмотрим оба этих метода ниже, а затем объясним, как вы можете центрировать div внутри другого div.

Примеры, включенные во всем построены на w3schools игровой Tryit редактор. Вы можете щелкнуть любую ссылку на источник, чтобы просмотреть пример полностью.

Как центрировать Div по горизонтали

Чтобы центрировать div по горизонтали на странице, просто установите для ширины элемента и свойства поля значение auto. Таким образом, div будет занимать любую ширину, указанную в CSS, а браузер будет гарантировать, что оставшееся пространство разделено поровну между двумя полями.

Давайте взглянем на базовый пример блочной модели CSS с горизонтально центрированным элементом div.

Допустим, вы хотите создать элемент div с коротким абзацем внутри и желтой рамкой вокруг него. В вашем HTML вы должны дать div имя класса, например «center». Затем вы можете использовать селектор CSS .center, чтобы задать для него стиль с помощью свойств поля, ширины, границы и заполнения.

Обратите внимание, что, в отличие от свойства margin, свойство заполнения CSS используется для создания пространства между границей блока div и абзацем внутри блока div (встроенный элемент). Вы можете узнать больше о разнице между полями CSS и заполнением, если не знаете, что делать.

Как центрировать элемент Div в CSS: 3 объяснения

Как центрировать Div по вертикали

Чтобы центрировать div по вертикали на странице, вы можете использовать свойство CSS position, свойства left и top и свойство transform. Начните с установки абсолютного положения div, чтобы он был исключен из обычного потока документов.

Затем установите свойства left и top на 50%. Это указывает браузеру выровнять левый и верхний край div с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице). Вот в чем проблема: если края блока div выровнены по центру страницы, он будет выглядеть не по центру. Вот пример.

Как центрировать элемент Div в CSS: 3 объяснения

Чтобы действительно центрировать div, вам нужно определить последнее свойство, известное как свойство преобразования CSS. Хотя существует девять различных методов преобразования (и это даже не включает 3D-преобразования), вы хотите использовать метод translate() для перемещения div по осям X и Y. В частности, вы хотите переместить div на 50% влево и вверх от его текущей позиции. Это скажет браузеру поместить центр div в центр страницы.

Давайте посмотрим на код, который вам нужно написать.

Как центрировать элемент Div в CSS: 3 объяснения

Как центрировать Div внутри Div

Вы можете центрировать дочерний элемент div внутри родительского элемента div с помощью Flexbox. Flexbox – отличный метод, поскольку он отзывчив и не требует расчета маржи, но нужно помнить о нескольких дополнительных шагах.

Чтобы центрировать div по горизонтали и вертикали с помощью Flexbox, вам необходимо установить высоту HTML, тела и родительского контейнера на 100%. Кроме того, вам необходимо определить родительский контейнер как гибкий контейнер. Вы можете сделать это, установив для свойства display значение «flex». Затем определите для свойства align-items и justify-content значение «center». Это укажет браузеру центрировать гибкий элемент (div внутри div) по вертикали и горизонтали.

Вы можете узнать больше о модуле макета Flexbox, прочитав Здесь различие между Flexbox, CSS Grid и Bootstrap. А пока давайте просто рассмотрим пример.

В приведенном ниже примере мы центрируем div с желтым цветом фона вместо границы и без текста внутри. Вместо этого он будет выглядеть как желтый квадрат.

Как центрировать элемент Div в CSS: 3 объяснения

Создание собственных макетов

Независимо от того, хотите ли вы центрировать div по горизонтали, вертикали или внутри другого div, некоторые знания кодирования позволят вам контролировать и настраивать макеты. Понимание свойств полей, позиционирования и гибкости, например, позволит вам центрировать практически любой элемент div или блока на странице.

Однако если вы только начинаете изучать HTML, CSS и JavaScript, шаги, описанные выше, могут показаться слишком сложными. В этом случае вы всегда можете использовать конструктор с перетаскиванием, например Elementor. Благодаря таким функциям, как вертикальное и горизонтальное выравнивание и встроенное позиционирование, Elementor упрощает каждый шаг процесса сборки, поэтому вам не нужно кодировать одну строку.

Выравнивание DIV по центру

Веб-дизайнеры ежедневно используют DIV в работе. Без преуменьшений, это самый популярный тег. Откройте источник любого сайта, и вы увидите, что большая часть, если не две трети объектов заключены в . Даже с приходом HTML5 и появлением серьезных конкурентов в виде article или header, его продолжают повсеместно вставлять в разметку. Поэтому предлагаю вам разобраться с вопросом форматирования и выравнивания блоков div по центру.

Как расположить div по центру

Что такое DIV

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

DIV поддерживает все глобальные атрибуты. Но для веб-дизайна вам понадобятся только два — это class и id. Обо всех остальных вы будете вспоминать только в экзотических случаях, и то не факт. Атрибут align, который раньше использовали, чтобы выровнять div по центру или по левому краю, считается устаревшим.

Как выровнять div по центру

Когда использовать DIV

Представьте себе, что сайт — это холодильник, а DIV — это пластиковые контейнеры, по которым надо рассортировать содержимое. Вы же не будете класть фрукты в одну емкость с ливерной колбасой. Каждый вид продукта вы положите отдельно. Аналогичным образом формируется веб-контент.

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

Теперь разберите каждую секцию детальней. Начните с header. У шапки сайта есть отдельно логотип, навигация, заголовок первого уровня, иногда слоган. Каждому смысловому блоку назначьте свой контейнер. Так вы не только разделите элементы в потоке, но и сделаете легче их форматирование. Вам будет гораздо проще выровнять объект в теге DIV по центру, назначив ему класс или идентификатор.

Как выровнять текст по центру div

Выравнивание DIV по центру с помощью полей

При обработке веб-элементов браузер учитывает три свойства: padding, marging и border. Отступы padding — это пространство между контентом и его границей. Margin — поля, отделяющие один объект от другого. Border — это линии вдоль блоков. Они могут быть назначены сразу со всех или только с одной стороны:

Эти свойства добавляют свободное пространство между объектами, а также помогают их выравнивать и размещать нужным образом. Например, если блок с картинкой нужно сместить от левого края к центру на 20%, вы присваиваете элементу margin-left со значением 20%:

Также элементы можно форматировать используя значения их ширины и отрицательные отступы. Например, есть блок с размерами 200px на 200px. Сначала назначим ему абсолютное позиционирование и сместим его к центру на 50%.

Теперь, чтобы DIV по центру был расположен идеально, задаем ему отрицательный отступ влево, равный 50% его ширины, то есть -100 пикселей:

В CSS такой способ называют «удаление воздуха». Но у него есть существенный недостаток в необходимости производить постоянные расчеты, что довольно сложно сделать для элементов с несколькими уровнями вложенности. Если заданы значения padding и border-width, браузер по умолчанию высчитает размеры контейнера как сумму толщины границ, отступов справа, слева и самого контента внутри, что тоже может стать неожиданностью.

Поэтому когда нужно выровнять DIV по центру, используйте свойство box-sizing со значением border-box. Оно не даст браузеру добавлять значение отступов и границ к общей ширине элемента DIV. Чтобы поднять или опустить элемент, также применяйте отрицательные значения. Но назначить в таком случае их можно либо верхнему, либо нижнему полю контейнера.

Как выровнять DIV блок по центру с помощью автоматических полей

Это простой способ центрировать крупные блоки. Вы просто назначаете ширину контейнера и свойство margin со значением auto. Браузер разместит блок посередине с одинаковыми полями слева и справа, выполнив всю работу самостоятельно. В результате, вы не рискуете запутаться в математических расчетах и существенно экономите свое время.

Используйте метод с автоматическими полями при разработке адаптивных приложений. Главное — назначать контейнеру значение ширины в em или процентах. Код из примера выше расположит DIV по центру и на любых устройствах, включая мобильные телефоны, он будет занимать 90% экрана.

Выравнивание через свойство display: inline-block

По умолчанию элементы DIV считаются блочными, и значение display у них стоит block. Для этого метода вам нужно будет переопределить это свойство. Подходит только для DIV с родительским контейнером:

Элементу с классом outer-div назначается свойство text-align со значением center, которое располагает текст внутри по центру. Но пока браузер видит вложенный DIV как блочный объект. Чтобы свойство text-align сработало, inner-div должен восприниматься как строчный. Поэтому в таблице CSS для селектора inner-div вы пишете следующий код:

Вы меняете свойство display с block на inline-block.

выравнивание div по центру

Метод transform/translate

Каскадные таблицы стилей дают возможность по желанию перемещать, скашивать, вращать и всячески трансформировать веб-элементы. Для этого используется свойство transform. В качестве значений указывается желаемый тип преобразования и степень. В данном примере мы будем работать с translate:

Функция translate перемещает элемент из его текущей позиции влево/вправо и вверх/вниз. В скобках передаются два значения:

  • степень перемещения по горизонтали;
  • степень перемещения по вертикали.

Если элемент нужно передвинуть только по одной из осей координат, тогда вы указываете после слова translate имя оси и в скобках величину требуемого смещения:

В некоторых руководствах можно встретить transform с вендорными префиксами:

В 2018 году этого делать больше не нужно, свойство поддерживается всеми браузерами, включая Edge и IE.

Для того чтобы сместить нужный нам DIV по центру, CSS-функция translate записывается со значением 50% для вертикальной и горизонтальной оси. Благодаря этому, браузер сместит элемент с его текущей позиции наполовину от его ширины и высоты. Свойства width и height должны быть обязательно указаны:

Учитывайте, что элемент, к которому применяется свойство transform двигается в независимости от окружающих его объектов. С одной стороны, это удобно, но иногда сдвигаясь, DIV может перекрыть собой другой контейнер. Поэтому такой способ центрировать веб-компоненты считается нестандартным и применяют его только в случаях крайней необходимости. Трансформации по всем канонам CSS используют для анимации.

выравнивание div по центру

Работа с Flexbox-версткой

Flexbox считается сложным способом верстки веб-макетов. Но если вы ее освоите, то поймете, что она гораздо проще и приятнее, чем стандартное способы форматирования. Спецификация Flexbox — это гибкий и невероятно мощный способ обработки элементов. С английского языка название модуля так и переводится, как «гибкий контейнер». Значения ширины, высоты, расположения элементов настраиваются автоматически, без вычисления отступов и полей.

Как выровнять по центру с помощью свойств css div по центру

В предыдущих примерах мы уже работали со свойством display, но задавали ему блочное (block) и строчное (inline-block) значение. Для создания flex-макетов мы будем использовать display: flex. Сначала нам понадобиться flex-контейнер:

Чтобы преобразовать его во флекс-контейнер в каскадных таблицах, мы пишем:

Все вложенные в него объекты, но только прямые потомки, будут являться flex-элементами:

Если вовнутрь flex-контейнера поместить список, то пункты списка li не считаются flex-элементами. Flexbox-верстка будет действовать только на ul:

Правила размещения flex-элементов

Чтобы управлять flex-элементами, нужны justify-content и align-items. В зависимости от указанных значений, эти два свойства размещают объекты нужным образом автоматически. Если нам нужно выровнять все вложенные DIV по центру, мы записываем justify-content: center, align-items: center и больше ничего. Всю остальную работу браузер выполнит сам:

Чтобы выровнять текст по центру DIV, которые являются flex-элементами, можно использовать стандартный прием text-align. Или вы можете каждый вложенный DIV также сделать flex-контейнеров и управлять содержимым с помощью justify-content. Такой способ гораздо рациональнее, если внутри содержится разнообразный контент, включая графику, другие вложенные объекты, включая многоуровневые списки.

CSS — Выравнивание

Центральный элемент
горизонтально и вертикально

Выравнить блок по центру

Выравнить блок по горизонтали по центру, нужно установить поле автоматически margin: auto;

Что бы предотвратить его от растягивания по краям, нужно установить ширину 50 пикселей width: 50%; .

Элемент примет позицую до указанной ширины, а остальное пространство будет разделено отступами по 10 пикселей со всех сторон padding: 10px; :

Пример

Примечание: Выравнивание по центру не будет имеет никакого эффекта, если свойство width не установлено (или установлено на 100 писелей).

Выравнить текст по центру

Простое выравнивание текста по центру внутри элемента, используется свойство со значением text-align: center;

Текст по центру.

Пример

Совет: Дополнительные примеры о том, как выровнять текст, см. главу CSS Текст.

Выравнить изображение по центру

Установить изображение по центру, нужно использовать автоматические поля margin: auto; и установить видимость блока display: block; :

Paris

Пример

Выравнить — используя позицию

Один из способов для выравнивания элементов является использование абсолютной позиции position: absolute; :

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

Пример

Примечание: Абсолютно позиционированные элементы удаляются из нормального потока, и они могут перекрываться другими элементами.

Совет: При выравнивании элементов с помощью позиции position , всегда определяйте поле margin и отступ padding для элемента , что позволяет избегать визуального различия в других браузерах.

Существует также проблема с IE8 и ранних версий, при использовании позиции position .
Если элемент в контейнере (в нашем случае ) имеет заданную ширину и отсутствует декларация !DOCTYPE .
IE8 и более ранние версии, добавят поле 17 пикселей с правой стороны, в месте которое предназначенно для прокрутки.
Всегда устанавливайте декларацию !DOCTYPE при использовании position :

Пример

Выравнивание — используя поплавок

Другой метод для выравнивания элементов заключается с использованием свойства float :

Пример

Совет: При выравнивании поплавка float , всегда определяйте поля margin и отступы padding для тела документа . Что позволит избежать визуального различия в разных браузерах.

Существует также проблема с IE8 и ранних версиях, при использовании поплавка float . Если отсутствует декларация !DOCTYPE , IE8 и более ранних версиях добавят поле 17 пикселей cправой стороны, в месте предназначенном для прокрутки.
Всегда устанавливайте декларацию !DOCTYPE при использовании поплавка float :

Пример

Выравнивание по центру — используя отступы

Есть много способов в CSS, чтобы установить элемент по центру по вертикали. Простое решение состоит в использовании верхнего и нижнего отступов с помощью свойства padding :

Вертикальное выравнивание по центру.

Пример

Что бы выровнить по центру, как по вертикали, так и по горизонтали, нужно использовать свойство отступ padding и свойство со значением выравнивание по центру text-align: center :

Вертикально и горизонтально по центру.

Пример

Выравнивание по центру — используя высоту строк

Есть еще одна хитрость, заключается в использовании свойства высоты строк line-height со значением height .

Вертикально и горизонтально по центру.

Пример

Выравнивание по центру — используя трансформацию

Если свойства padding и line-height не вариант, третьим решением является использование выравнивания, свойство трансформация transform :

Вертикально и горизонтально по центру.

Пример

Совет: Вы узнаете больше о трансформации собственности в нашей Глава 2D преобразования.

Выравнивание содержимого блока div

Выравнивание содержимого div блока
Добрый день. Уже второй день мучаюсь с выравниванием содержимого div блока по центру, вроде все.

Залипание блока div в html далее содержимого блока
Подскажите пожалуйста, несколько дней не могу найти. Нужно div прилепить к верху после прокрутки.

Вертикальное выравнивание содержимого блока
Внутри одного дива есть еще несколько дивов, расположенных друг под другом. Вот html: <div.

Выравнивание DIV-блока
Вопрос простой: <div align="center">текст</div> всё нормально работает, но если сделать: <div.

Похожие публикации:

  1. Как сделать кнопку посередине css
  2. Как сделать круглую кнопку в css
  3. Как сделать меню навигации css
  4. Как сделать обводку текста в html css

Как закрепить кнопку по центру снизу

введите сюда описание изображения Она находится в блоке введите сюда описание изображения Нужно кнопку прижать к нижней части и по центру(Контент в блоке динамичный) введите сюда описание изображения Добавляю в css

position: absolute; bottom: 25px; right: 0; left: 0; text-align: center; 

Получаю вот это

.bl-i < height: 410px; color: #fff; background: #666666; margin-bottom: 15px; >.view-e
Пруток металлический
  • Круг стальной
Показать еще

введите сюда описание изображения

Что я делаю не правильно?

Отслеживать
задан 4 сен 2018 в 8:00
1,454 1 1 золотой знак 12 12 серебряных знаков 33 33 бронзовых знака

не используй абсолютное позиционирование для центрирования — это очень плохая практика. + из твоей задачи не ясно является ли необходимым условием фиксированная высота контейнера bl-i. Если нет — то задача элементарно решается несколькими вариантами например с помощью display:inline-block у кнопки + text-align:center у родителя. Если же у тебя всегда фиксированный контейнер в 410 пикселей то тогда нужен другой подход который учитывает возможность того что картинки будут разных размеров.

4 сен 2018 в 8:17

@DenisRoss почему не использовать абсолютное позиционирование? Блок с фиксированной высотой и с динамическим контентом, то есть у картинки может быть разный размер и сами пункты(+-)

4 сен 2018 в 8:24

Если блок фиксированной высоты то это в какой-то мере меняет дело — можно и абсолютом ее прилепить к низу конечно, но я бы поступил иначе. Ты ведь хочешь чтобы все выглядело красиво и идентично для разных картинок (имеется ввиду размер) или что бы в случае маленькой картинки кнопка уже была не прилеплена к низу а шла сразу за картинкой? И если картинка очень большая и не влезает в 410px ее по хорошему тоже оставлять в таком виде нельзя. Опиши подробнее поведение всего блока в целом — я сверстаю, там ничего сложного.

4 сен 2018 в 8:28

При использовании маленькой картинки, кнопка все равно должна находиться в нижней части, при использовании большой картинки ей задается(max-height) чтобы она далеко не лезла(Примерно до h5), li минимальное количество 1, максимальное количество 5 штук

4 сен 2018 в 8:35

А блок ul прилеплен к кнопке (в случае маленькой картинки остается снизу вместе с кнопкой) ? или же прилеплен к картинке?

Position fixed по центру

Здравствуйте!
Подскажите пожалуйста как задать элементу свойство position fixed и чтоб оно цбыло по центру в разных разрешениях монитора?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Fixed absolute и relative. Как сделать fixed блок по центру relative родителя?
Хелп плз( сломал голову уже и поиск ни к чему толковому не привел. <div <div.

position:fixed
хром меню показывает не там где нужно http://stihi-na-zakaz.16mb.com/site/ как сделать что бы оно.

Position: fixed;
почему элемент с position: fixed; немного, примерно на половину своей высоты, "ездит" вверх-вниз.

Регистрация: 06.12.2011
Сообщений: 30

Смотря что ты имешь ввиду под элементом если это текст то так

ТУТ ВАШ ТЕКСТ

Если это изображение
Регистрация: 16.02.2011
Сообщений: 270
надо дивы по центру и position fixed — уже голову сломал
Регистрация: 14.04.2012
Сообщений: 94
Я так понимаю, надо чтобы по горизонтали он был центрирован, а по вертикали — зафиксирован, верно?

div align="center" width=100%>span style="position:fixed;">Текст, например./span>/div>

Итого: массив растянутый на 100% ширины окна с центрированием содержит внутри себя текст (как пример), который сохраняет постоянное вертикальное положение вне зависимости от прокрутки страницы и центрирован.

Это надо? Стиль или класс прописывать элементу. То есть, если это изображение, то
Регистрация: 18.11.2014
Сообщений: 7
Вот решение
fixed по центру горизонтали

1 2 3
margin:auto; left:0; right:0;

39 / 39 / 26
Регистрация: 11.01.2014
Сообщений: 343

1) Современные требования к верстке это адаптивность, по средине это не только по ширине монитора, но и по отношению к высоте монитора.
2) Высота блока по центру может (и будет) меняться! так что обычный fixed или text-align-center вам не поможет
3) Гуглите, в интернете есть куча способов выставить блоки по центру.
Как правило для решения любой задачи в верстке есть как минимум 3 рещения
-самый глупый «в лоб»
Это когда мы все ставим как видим. Со статическими данными
-универсальный
Самый правильный, когда за годы работы мы сталкиваемся этой проблемой очень часто и находим самое лучшее решение.
-js
Этот инструмент развяжет вам руки там, где html кажется бессильным. Научитесь использовать этот инструмент.

Ктото выставляет в связке с position absolute и margin, но такой способ оооочень не универсален, так приходится следить за высотой блока
в лоб

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
.parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 250px; height: 250px; position: absolute; top: 50%; left: 50%; margin: -125px 0 0 -125px; img { max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; } }

Обратите внимание что нам требуется контролировать высоту и ширину окна, это значит что если контент поменяется то придется в css вносить новые данные.

Универсальный

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
.parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before { height: 100%; display: inline-block; vertical-align: middle; content: ''; } } .block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img { display: block; border: none; } }

Самый лучший способ выравнивания блока по центру по отношению к другим блокам.
Идея такова что псевдоэллемент before, если он видит высоту родителя, дает нам возможность выравнять блок по центру по высоте. Так как выравниваемый блок является inline-block как и его соседний элемент, то свойство родителя text-align: center; ставит наш блок в центр по ширине.
Нам не обязательно контролировать ширину .block так как его ширина будет зависит от ширины его внутреннего контента.
Но для большей адаптивности и контролируемость стоит указать максимальную и основную ширину блока.

1 2 3 4 5 6 7 8
.block { display: inline-block; white-space: normal; vertical-align: middle; text-align: left; width:500px; max-width:100%; }

ну и js
способ. Он во многом похож на 1й способ, только js можно заставить мониторить ширину и высоту блока и давать соответствующую реакцию блоку.

А вообще странно что вы спрашиваете о такой тривиальной задачи
Учитесь пользоваться поиском. Иначе вам будет ОЧЕНЬ сложно

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Проблема с position:fixed
Проблема надо что бы фиксированный болк был с боку от всего основного текста(типо side bar’a) и при.

В IE не работает position:fixed
Здравствуйте! Подскажите пожалуйста- сделал кнопку "позвонить" справа посередине экрана и в CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *