Div выровнять по центру: Выравниваем блок по центру страницы / Хабр

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

HTML:

<div>
   <iframe src="https://money.yandex.ru/quickpay/button-widget?targets=GramWay%20%22%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%22&default-sum=14990&button-text=11&any-card-payment-type=on&button-size=m&button-color=black&mail=on&successURL=&quickpay=small&account=410013809845735&" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

• html
• css
• веб-программирование

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

display: flex;
justify-content: center;

Пример:

.container {
	display: flex;
	justify-content: center;
}

<section>
    <div>
        <iframe src="https://money.yandex.ru/quickpay/button-widget?targets=GramWay%20%22%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%22&default-sum=14990&button-text=11&any-card-payment-type=on&button-size=m&button-color=black&mail=on&successURL=&quickpay=small&account=410013809845735&" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
    </div>
</section>

А можно без флексов )

#oplatabutton {
  text-align: center
}
#oplatabutton span {
 display: inline-block
}

<div>
   <iframe src="https://money. yandex.ru/quickpay/button-widget?targets=GramWay%20%22%D0%A0%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82%D0%B0%D1%82%22&default-sum=14990&button-text=11&any-card-payment-type=on&button-size=m&button-color=black&mail=on&successURL=&quickpay=small&account=410013809845735&" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Центрирование резинового блока по горизонтали

Автор: Татьяна Шкабко, Александр Головко Дата публикации:

Представь типичный фрагмент сайта: фотография, а под ней ссылка с выравниванием по-центру:

Тут все просто. Самое долгое в верстке этого блока — вырезать фотографию. Давай немного усложним задачу: ссылка должна выглядеть как кнопочка (т.е. иметь фон). Например, такой:

Тоже легко? Контейнеру text-align: center, ссылке display: block, margin: 0 auto, фон и ширину… Стоп! А если ссылка-кнопка резиновая? Ширину-то задавать и нельзя! А без нее блочный элемент разъедется на все доступное пространство. Как же его подогнать под размер содержимого?

Как вариант задать float, например, left. Элемент останется блочным, а значит фоновый рисунок не пострадает, и сожмется до размеров содержимого. Решения найдено? Как бы не так! Теперь margin: 0 auto не работает и кнопка преспокойненько прилипла к левому краю!

Ну и дела! Похоже придется задавать margin-left в зависимости от ширины надписи…

Пробуем включить мозг. Итак:

1. Чтобы присвоить фоновую картинку ссылке, ее нужно сделать блочной.
2. Чтобы спозиционировать блочный элемент по центру экрана нужно задать ему ширину, иначе он растянется на всю ширину родительского элемента.
3. Чтобы элемент не растягивался на всю ширину родителя для него обычно прописывают float: left, но тогда он будет выровнен по левому краю и ему нужно задать отступ слева. Но я не знаю, какой будет отступ слева, потому, что он зависит от ширины кнопки!

То есть я не могу сделать ссылку строчной, потому что у нее есть высокая фоновая картинка, и не могу выровнять резиновую блочную ссылку по центру. Ни display: inline, ни display: block в этом случае не подходят. Вот если бы было так, чтобы одновременно и по центру как display: inline и с картинкой, как display: block…

А ведь именно так и можно сделать! В спецификации CSS2 у свойства display специально на этот случай есть значение inline-block, которое превращает элемент в строчный блок.

Таким образом, решением данной задачи будет следующий код:

	<div>
		<div>
			<img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" />
		</div>
		<a href="#">Комментировать<span></span></a>
	</div>

.parent{
	text-align: center;
}
.button{
	display: inline-block;
	color: #fff;
	position: relative; 
	margin: 0 auto;
	line-height: 32px;
	padding: 0px 6px 0 10px;
	font-size: 12px;
	background: url(path-to/inline-block-button.png) no-repeat;
	text-decoration: none;
	cursor: pointer;
}
.button span{
	position: absolute;
	width: 5px;
	height: 32px;
	right: -4px;
	top: 0;
	background: url(path-to/inline-block-button-cup.png) no-repeat;
}
		

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.0
• Opera 9. 5-10.5
• Safari 4
• Chrome 5

Такой вариант подойдет для выравнивания любого строчного элемента. Для блочных это тоже работало бы, если бы не одно мелкомягкое НО. Да, ты конечно понял, какое. Я даже не удивился — display: inline-block неправильно работает с блоками в IE6 и даже IE7.

Тем не мение, как всегда, имеется способ побороть разработки Microsoft, к тому же их же оружием. А именно, используя Microsoft свойство hasLayout!

Для того, чтобы все заработало, придется сделать элемент строчным принудительно, задав display: inline, а уже потом присвоить ему layout. В данной ситуации сделать это можно, прописав zoom: 1.

Решение нашей задачи с блочным элементом в главной роли:

	<div>
		<div>
			<img src="path-to/img-inline-block.png" alt="Аватарка с улиткой" />
		</div>
		<div>Комментировать<span></span></div>
	</div>

.  parent{
	text-align: center;
}
.button{
	position: relative;
	margin: 0 auto;
	line-height: 32px;
	padding: 0px 6px 0 10px;
	font-size: 12px;
	background: url(path-to/inline-block-button.png) no-repeat;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	//display: inline;
	zoom: 1;
}
.button span{
	position: absolute;
	width: 5px;
	height: 32px;
	right: -4px;
	top: 0;
	background: url(path-to/inline-block-button-cup.png) no-repeat;
}
		

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.0
• Opera 9.5-10.5
• Safari 4
• Chrome 5

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

Заметка

Также display: inline-block не работает в Firefox 2 и его эмулируют используя вендорное значение display: -moz-inline-stack. Эта информация носит скорее ознакомительный характер, потому что процент пользователей Firefox 2 падает с каждым днем и, думаю, с ним не стоит заморачиваться.

Выводы

Резиновый строчный элемент с фоном можно выровнять по центру родителя просто присвоив родителю text-align: center, а элементу display: inline-block, который превратит элемент в строчный блок.

Резиновый блочный элемент для всех нормальных браузеров выравнивается точно так же. Для IE6-7 алгоритм такой:

1. В правилах для IE6-7 сделать элемент строчным (display: inline).
2. Установить этому элементу layout.

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

следующий → ← предыдущая CSS в основном используется для придания наилучшего стиля веб-странице HTML. Используя CSS, мы можем указать расположение элементов на странице. Существуют различные способы выравнивания кнопки по центру веб-страницы. Мы можем выровнять кнопки как по горизонтали, так и по вертикали. Мы можем центрировать кнопку, используя следующие методы: text-align: center — Установив значение свойства text-align родительского тега div по центру. margin: auto — установив для свойства margin значение auto. display: flex — путем установки значения свойства display на flex и значения свойства justify-content на center . дисплей: сетка — Путем установки значения свойства отображения на сетку. Давайте разберемся с описанными выше методами, используя некоторые иллюстрации. Пример В этом примере мы используем text-align и установите для него значение center . Его можно поместить либо в тег body, либо в родительский тег div элемента. Здесь мы размещаем text-align: center; в родительском теге div элемента кнопки. <голова> <мета-кодировка="UTF-8"> <стиль> . контейнер{ выравнивание текста: по центру; граница: 7 пикселей сплошного красного цвета; ширина: 300 пикселей; высота: 200 пикселей; отступы сверху: 100px; } #бтн{ размер шрифта: 25px; } <тело> <дел> Нажмите на меня Протестируйте сейчас Выход Пример В этом примере мы используем display: grid; свойство и поле : авто; недвижимость. Здесь мы размещаем дисплей display: grid; в родительском теге div элемента кнопки. Кнопка будет располагаться по центру горизонтального и вертикального положения. <голова> <стиль> .контейнер { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошного красного цвета; отображение: сетка; } кнопка { цвет фона: голубой; черный цвет; размер шрифта: 25px; маржа: авто; } п{ размер шрифта: 25px; } <тело> <дел> Нажмите на меня В этом примере мы используем display: grid; и margin: auto; свойства Протестируйте сейчас Выход Пример Еще один пример размещения кнопки в центре. В этом примере мы используем дисплей : flex; свойство, выравнивание-содержание: центр; свойств и элементов выравнивания: центр; недвижимость. Этот пример поможет нам разместить кнопку в центре горизонтального и вертикального положения. <голова> <стиль> .контейнер { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошного красного цвета; дисплей: гибкий; выравнивание содержимого: по центру; выравнивание элементов: по центру; } кнопка { цвет фона: голубой; черный цвет; размер шрифта: 25px; } <тело> <дел> Нажмите на меня Протестируйте сейчас Выход Следующая темаКак изменить цвет фона в CSS ← предыдущая следующий →

Классы для выравнивания или изменения текста/элемента

Ionic Framework предоставляет набор служебных классов CSS, которые можно использовать для любого элемента для изменения текста, размещения элемента или настройки отступов и полей.

Если ваше приложение не было запущено с помощью доступного пускового устройства Ionic Framework, таблицы стилей, перечисленные в необязательном разделе глобальных таблиц стилей, должны быть включены, чтобы эти стили работали.

Изменение текста

Выравнивание текста

  
  
  
 
 
 
text-start
 
 Lorem ipsum dolor sit amet , consectetur adipiscing elit. Sed ac vehicula lorem. 
 
 
  
  
 
 
 
text-end
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. 
 
 
  
  
 
 
 
text-center
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. 
 
 
  
  
  
  
 
 
 
выравнивание по тексту
 
 Lorem ipsum dolor сидеть амет, consectetur adipiscing elit.  Sed ac vehicula lorem. 
 
 
  
  
 
 
 
обтекание текстом
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. 
 
 
  
  
 
 
 
text-nowrap
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
 
  
  
  
 

90 095

Класс	Правило стиля	Описание
.ион- текст слева	text-align: left	Встроенное содержимое выравнивается по левому краю строки.
.ion-text-right	text-align: right	Встроенное содержимое выравнивается по правому краю строки.
.ION-TEXT-Start	Текст-альбом: старт	То же самое, что -левое , если направление остается вправо и . 0166, если направление справа налево.
.ion-text-end	text-align: end	То же, что text-right если направление слева направо и text-left 9 0166 если направление правое- налево.
.ion-text-center	text-align: center	Встроенное содержимое центрируется внутри строки.
.ion-text-выравнивание	text-align: justify	Встроенное содержимое выравнивается. Текст должен располагаться так, чтобы его левый и правый края выровнялись с левым и правым краями строки строки, за исключением последней строки.
.ion-text-wrap	white-space: normal	Последовательности пробелов свернуты. Символы новой строки в исходном коде обрабатываются как другие пробелы. Разрывает строки по мере необходимости, чтобы заполнить поля строки.
.ion-text-nowrap	white-space: nowrap	Сворачивает пробелы, как для normal , но подавляет разрывы строк (перенос текста) в тексте.

Преобразование текста конструкция адипистинг эл. Sed ac vehicula lorem.

text-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

text-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

Класс	Правило стиля	Описание
.ion-text-uppercase	text-transform: uppercase	Принудительное преобразование всех символов в верхний регистр.
.ion-text-lowercase	text-transform: нижний регистр	Принудительное преобразование всех символов в нижний регистр.
.ion-text-capitalize	text-transform: capitalize	Принудительное преобразование первой буквы каждого слова в верхний регистр.

Классы адаптивного текста

Все классы текста, перечисленные выше, имеют дополнительные классы для изменения текста в зависимости от размера экрана. Вместо text- в каждом классе используйте text-{точка останова}- , чтобы использовать класс только для определенных размеров экрана, где {точка останова} — одно из имен точек останова, перечисленных в Ionic Breakpoints.

В таблице ниже показано поведение по умолчанию, где {модификатор} — любое из следующего: слева , справа , начало , конец , центр , 9016 5 по ширине , обернуть , nowrap , верхний регистр , нижний регистр или заглавная буква , как описано выше.

Класс	Описание
.ion-text-{модификатор}	Применяет модификатор к элементу на всех размерах экрана.
.ion-text-sm-{modifier}	Применяет модификатор к элементу, когда min-width: 576px .
.ion-text-md-{modifier}	Применяет модификатор к элементу, когда min-width: 768px .
.ion-text-lg-{modifier}	Применяет модификатор к элементу, когда min-width: 992px .
.ion-text-xl-{modifier}	Применяет модификатор к элементу, когда min-width: 1200px .

Плавающие элементы​

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

  
  
  
 
no float
 
  alt="Силуэт головы человека" 
 src="https:// ionicframework.com/docs/img/demos/avatar.svg" 
 height="50px" 
 /> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. 
  
  
 
float-left
 
  alt="Силуэт головы человека" 
 src="https://ionicframework.com/docs /img/демо/аватар.svg" 
 height="50px" 
 class="ion-float-left" 
 /> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. 
  
  
 
float-right
 
  alt="Силуэт головы человека" 
 src="https://ionicframework.com/docs /img/demos/avatar.svg" 
 height="50px" 
 class="ion-float-right" 
 /> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed ac vehicula lorem. 
  
  
  
 

90 004 .ion-поплавок-левый

Класс	Правило стиля	Описание
поплавок: левый	Элемент будет перемещаться слева от содержащего его блока.
.ion-float-right	float: right	Элемент будет плавать справа от содержащего его блока.
.ion-float-start	float: влево / float: вправо -right и float-right если направление справа налево.
.ion-float-end	float: левый / float: правый	То же, что float-right если направление левое- вправо и с плавающей запятой влево , если направление справа налево.

Классы отзывчивых плавающих элементов

Все классы плавающих элементов, перечисленные выше, имеют дополнительные классы для изменения плавающих элементов в зависимости от размера экрана. Вместо float- в каждом классе используйте float-{точка останова}- , чтобы использовать класс только для определенных размеров экрана, где {точка останова} — одно из имен точек останова, перечисленных в Ionic Breakpoints.

В таблице ниже показано поведение по умолчанию, где {модификатор} может быть любым из следующих: слева , справа , начало или конец , как описано выше.

Класс	Описание
.ion-float-{modifier}	Применяет модификатор к элемент на всех размерах экрана.
.ion-float-sm-{modifier}	Применяет модификатор к элементу, когда min-width: 576px .
.ion-float-md-{modifier}	Применяет модификатор к элементу, когда min-width: 768px .
. ion-float-lg-{modifier}	Применяет модификатор к элементу, когда min-width: 992px .
.ion-float-xl-{modifier}	Применяет модификатор к элементу, когда min-width: 1200px .

Свойство CSS display определяет, должен ли элемент быть видимым или нет. Элемент по-прежнему будет находиться в DOM, но не будет отображаться, если он скрыт.

  
  
  
 
 
 
скрытый
 
 Ты меня не видишь. 
 
 
  
  
 
 
 
не скрыто
 
 Ты меня видишь! 
 
 
  
  
  
 

90 095

Класс	Правило стиля	Описание
.ion-hide	display: none	Элемент будет скрыт.

Атрибуты адаптивного дисплея

Существуют также дополнительные классы для изменения видимости в зависимости от размера экрана. Вместо .ion-hide для всех размеров экрана используйте .ion-hide-{breakpoint}-{dir} , чтобы использовать класс только для определенных размеров экрана, где {breakpoint} является одной из точек останова. имена, перечисленные в Ionic Breakpoints, и {dir} указывает, должен ли элемент быть скрыт на всех размерах экрана выше ( до ) или ниже ( до ) указанной точки останова.

Класс	Описание
.ion-hide-sm-{dir}	Применяет мод ifier к элементу, когда min-width: 576px ( до ) или максимальная ширина: 576px ( вниз ).
.ion-hide-md-{dir}	Применяет модификатор к элементу при min-width: 768px ( up ) или max-width: 768px ( down ).
. ion-hide-lg-{dir}	Применяет модификатор к элементу, когда min-width: 992px ( up ) или max-width: 992px ( вниз ) .
.ion-hide-xl-{dir}	Применяет модификатор к элементу, когда min-width: 1200px ( up ) или max-width: 1200px ( down ).

Пространство содержимого

Заполнение элемента

Класс заполнения устанавливает область заполнения элемента. Область заполнения — это пространство между содержимым элемента и его границей.

Размер padding по умолчанию составляет 16px и устанавливается переменной --ion-padding . Дополнительную информацию о том, как изменить эти значения, см. в разделе «Переменные CSS».

  
  
  
 
padding
 
  
  
 
padding-top 
  
  
 
padding-start
 
  
  
 
padding-end
 
  
  
  
  
 
padding-bottom
 
  
  
 
padding-vertical
 
  
  
 
padding-horizontal
 
 < /ion-col> 
  
 
no-padding
 
  
  
  
 

Класс	Style Rule	Описание
. ion-padding	padding: 16px	Применяет отступы со всех сторон.
.ion-padding-top	padding-top: 16px	Применяет отступ к верху.
.ion-padding-start	padding-start: 16px	Применяет отступ к началу.
.ion-padding-end	padding-end: 16px	Применяет отступ к концу.
.ion-padding-bottom	padding-bottom: 16px	Применяет отступ снизу.
.ion-padding-vertical	padding: 16px 0	Применяет отступы сверху и снизу.
.ion-padding-horizontal	padding: 0 16px	Применяет отступ слева и справа.
.ion-no-padding	отступ: 0	Без отступов со всех сторон.

Поле элемента​

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

Размер поля по умолчанию, который будет применяться, составляет 16px и устанавливается переменной --ion-margin . Дополнительную информацию о том, как изменить эти значения, см. в разделе «Переменные CSS».

 <ионная сетка> 
  
  
 
margin
 
  
  
 
margin-top
 
  
  
 
margin-start
 
  
  
 
margin-end
 
  
  
  
  
 
margin-bottom
 
  
  
 
margin-vertical
 
  
  
 
margin-horizontal
 
  
  
 < div>no-margin

  
  
  
 
1 из 2
 
  
  
 
2 из 2
 
  
  
  
  
 
1 из 2
 
  
  
 
2 из 2
 
  
  
 
  
  
 
1 из 2 
 
  
  
 
2 из 2
 
  
  
 
 < ion-row> 
  
 
1 из 2
 
  
  
 
2 из 2
 
  
  
 
  
  
 
1 из 2
 
  
  
 
2 из 2
 
  
  
 
  
  
 
1 из 2
 
  
  
 
2 из 2
 
  
  
  
 
  
  
  
 
1 из 4
 
  
  
 
2 из 4 
 
  
  
 
3 из 4
 
  
  
 
4 из 4 # # #
 
  
  
 
  
  
 
1 из 4
 
  
  
 
2 из 4
 
  
  
 
3 из 4
 
  
 < ion-col> 
 
4 из 4 # # #
 
  
  
 
  
  
 
1 из 4
 
  
  
 
2 из 4
 
  
  
 
3 из 4  
  
  
 
4 из 4 # # #
 
  
  
 
  
 < ion-col> 
 
1 из 4
 
  
  
 
2 из 4
 
  
  
 
3 из 4
 
  
  
 
4 из 4 # # #
 
  
  
 
  
  
 
1 из 4
 
  
  
 
2 из 4
 
 < /ion-col> 
  
 
3 из 4
 
  
  
 
4 из 4 # # #
 
  
  
  
 
 

  
  
  
 
1 из 4
 
  
  
 
2 из 4
 
  
  
 
3 из 4
 
  
  
 
4 из 4 # # #
 
  
  
  
 

  
  
 Заголовок — без рамки 
  
  
  
  
 Нижний колонтитул - Без рамки