Содержание

Выравнивание кнопки по центру — CodeRoad



У меня есть простая кнопка отправки. Я хочу выровнять его по центру. Вот мой код:

<input type="submit" name="btnSubmit" value="Submit" align="center">

Однако это не работает. Каков наилучший / самый простой способ сделать это?

html css
Поделиться Источник Garry     02 апреля 2012 в 06:27

5 ответов


  • Таблица выравнивание по центру не выравнивает по центру

    Я строю простую таблицу в CKEditor. Если я выберу выравнивание по левому или правому краю, то при сохранении он выровняется по ожидаемой стороне вида. Однако при сохранении это не удается, если я выбираю выравнивание по центру. Очевидно, что это не вся страница, потому что текст выравнивания по…

  • Autolayout выравнивание по центру y странное поведение при установке множителя

    У меня есть вспомогательный вид с динамической высотой в моей раскадровке, это обычная практика, чтобы сделать макет отзывчивым. Однако, когда я ввожу множители, происходит нечто странное. Синяя кнопка выровнена по центру y к белому виду слева: Изменение значения множителя на 0.5 должно выровнять…



35

Вы должны использовать что-то вроде этого:

<div>  
    <input type="submit" />  
</div>  

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

<input type="submit" />

Поделиться lvil     02 апреля 2012 в 06:31



2

Для меня он работал с использованием flexbox, что, на мой взгляд, является самым чистым решением.

Добавьте класс css вокруг родительского div / элемента с помощью :

.parent {
display: flex;
}

а для использования кнопки:

.button {
justify-content: center;
}

Вы должны использовать родительский div, иначе кнопка не ‘know’, что такое середина страницы / элемента.

Если это не работает, попробуйте :

#wrapper {
    display:flex;
    justify-content: center;
}

Поделиться Roy     01 ноября 2017 в 11:51



1

Вот что сработало для меня:

    <input type="submit">

Если вы только добавить отрывом, без левой части, она будет сосредоточена на кнопку «отправить» в центре всей страницы, что делает его трудно найти и визуализации формы неполной для людей, которые не имеют терпения, чтобы найти кнопку Submit лол. левое поле-центры это в той же строке, так что это не дальше вниз на Вашей странице, чем вы собирались. Вы также можете использовать пиксели вместо процента, если просто хотите немного отступить от кнопки отправки, а не до середины страницы.

Поделиться Anna Medyukh     15 марта 2017 в 01:33


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

    Если у меня есть тег div. <div id=length></div> Я хочу, чтобы его содержимое было сосредоточено. Я также хочу, чтобы ширина div была уменьшена(достаточно, чтобы вместить число). #length{ background:black; color:white; border:3px solid grey; width:35px; //margin-left:655px;// Currently…

  • Выравнивание по центру строки GridPane в JavaFX

    У меня есть GridPane в fxml, который имеет текстовый заголовок и 4 кнопки. Сам GridPane выровнен по центру, но все кнопки выровнены по левому краю внутри столбца сетки. Я знаю, как изменить выравнивание элементов с помощью кода Java, но это не идеальная ситуация, так как я хотел бы, чтобы все…



0

margin: 50%; 

Вы можете настроить процент по мере необходимости. Кажется, это работает для меня в отзывчивых электронных письмах.

Поделиться Holly Williford     22 апреля 2016 в 16:59



0

Добавьте width:100px, margin:50% . Теперь левая сторона кнопки установлена по центру.
Наконец, добавьте половину ширины

кнопки в нашем случае 50px .
Середина кнопки находится в центре.

<input type='submit'>

Поделиться japetko     29 октября 2017 в 22:19


Похожие вопросы:


UIView-выравнивание по центру всего содержимого UIView?

Как центрировать выравнивание всего содержимого вида. Когда я вращаю iPad содержимое не выравнивается по центру, как решить эту проблему?? Спасибо!!!


qt выравнивание строки состояния по центру?

Как я могу выровнять текст по центру в QStatusBar? По умолчанию он всегда выровнен по левому краю. Я знаю, что могу добавить QLabel и установить выравнивание, но я хочу использовать обычный текст и…


Выравнивание текста по вертикали и Центру

У меня есть h2 внутри body ,и я хочу выровнять этот текст по вертикали и по центру. Я знаю, что могу использовать position: absolute; , а затем margin-top: HALF OF HEIGHT; , но этот h2 меняется при…


Таблица выравнивание по центру не выравнивает по центру

Я строю простую таблицу в CKEditor. Если я выберу выравнивание по левому или правому краю, то при сохранении он выровняется по ожидаемой стороне вида. Однако при сохранении это не удается, если я…


Autolayout выравнивание по центру y странное поведение при установке множителя

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


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

Если у меня есть тег div. <div id=length></div> Я хочу, чтобы его содержимое было сосредоточено. Я также хочу, чтобы ширина div была уменьшена(достаточно, чтобы вместить число). #length{…


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

У меня есть GridPane в fxml, который имеет текстовый заголовок и 4 кнопки. Сам GridPane выровнен по центру, но все кнопки выровнены по левому краю внутри столбца сетки. Я знаю, как изменить…


Как добавить панель инструментов выравнивания(выравнивание по левому краю, выравнивание по центру, выравнивание по правому краю) в Редакторе Summernote

Я делаю некоторые POC в Редакторе summernote HTML и использую пользовательскую панель инструментов, но я не понимаю, как добавить выравнивание(выравнивание по левому краю, выравнивание по центру,…


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

У меня есть div, в котором все содержимое выровнено по центру: <div align=center> <table><tr><td>….. Но выравнивание не является более допустимым атрибутом. Итак, я перешел…


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

Я создаю пользовательскую тему в JavaFX, используя CSS, и пытаюсь сделать так, чтобы все HBoxes и VBoxes имели выравнивание по центру. Я искал везде, чтобы найти, есть ли класс укладки для родителей…

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

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

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

Кнопки

Создадим кнопку общего назначения:

.button {
   /* геометрия элемента */
   width: 150px;
   height: 20px;
   /* отступы между кнопками */
   margin-bottom: 5px;
   /* центрируем текст кнопки по вертикали */
   display: flex;
   justify-content: center;
   /* центрируем текст кнопки по горизонтали */
   text-align: center;
   /* чтобы работала геометрия и отступы у тега <a> */
   display: inline-block;
   /* убираем обводку у тега <a> */
   text-decoration: none;
   background-color: red;
   color: #fff;
}

Примеры использования:

<a href=»#»>Отправить резюме</a> 
<a href=»/»>Очистить форму</a>


Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:


Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {
   min-width: 150px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   /* … остальной код без изменения */
}


Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {
   /*
      поскольку другое значение border-box не задавалось,
      нужно подкорректировать размеры
    */
   min-width: 140px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   padding: 0 10px;
   /* … остальной код без изменения */
}


Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

<div>
 <h2>
   Поздравляю, вы стали обладателем квартиры в Сызрани!
 </h2>
</div>

.greeting {
 /* задаём геометрию */
 height: 200px;
 padding: 20px;
 /* центрируем содержимое по вертикали и горизонтали */

 display: flex;
 align-items: center;
 justify-content: center;
 /* учитываем последующее добавление элементов */
 flex-direction: column;
 background: blue;
}
.greeting__title {
 color: #fff;
 font-family: Arial;
 font-size: 20px;
}

Вот что у нас получилось:


Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {
 /* задаём геометрию */

 min-height: 200px;
 padding: 20px;
 /* код без изменения */
}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {
 /* задаём геометрию */
 min-height: 40px;
 /* тут речь идет только о box-sizing:content-box */
 padding: 80px;
 /* код без изменения */
}

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


Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

<div>
 <div>
   <h2>
     Поздравляю, вы стали обладателем квартиры в Сызрани!
   </h2>
 </div>
</div>

И так тоже не делайте:

.greeting {
 /* задаём геометрию */
 min-height: 40px;
 /* не задаём никакие отступы в родительском элементе */
 /* код без изменения */
}

.greeting__container {
 margin: 80px;
}

Резюме

  • Для всего, что может измениться, задавайте минимальные и максимальные размеры.
  • Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Выравнивание по правому краю | CSS — Примеры

Как выровнять картинку по правому краю

по умолчанию text-align margin-left float position display Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны. Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right, позволяющих сдвигать содержимое вправо. Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны. Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static, с помощью свойств top, right, bottom, left. При direction: ltr; свойство left имеет приоритет над свойством right, кроме случаев, когда свойство left имеет значение auto. Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table, а table-celltd. Также стоит обратить внимание на значение flex.
<div>Длинный абзац с несколькими предложениями. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.</div>
<style>
.raz {
  text-align: right;
}
</style>

<div><a href="http://shpargalkablog.ru/2016/02/text-align.html">Свойство <code>text-align</code></a> наследуется, применяется к блочным элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"><br>Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе <code>right</code>, позволяющих сдвигать содержимое вправо.</div>
<style>
.raz img {
  display: block; 
  margin-left: auto;
}
</style>

<div><a href="http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html">Свойство <code>margin-left</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> У него есть значение <code>auto</code>, которое выравнивает блочный элемент по горизонтали. А именно <code>margin-left: auto;</code> прижимает элемент к правому краю родителя. Это положение может изменяться свойством <code>margin-right</code>. <a href="http://shpargalkablog.ru/2012/03/div-po-centru-html.html">При <code>margin-left: auto;</code> и <code>margin-right: auto;</code> элемент размещается по центру ширины предка.</a></div>
<style>
.raz img {
  float: right;
}
</style>

<div><a href="http://shpargalkablog.ru/2011/05/float-left-div-css.html">Свойство <code>float</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.</div>
<style>
.raz {
  position: relative; 
}
.raz img {
  position: absolute;
  right: 0;
}
</style>

<div><a href="http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html">Свойство <code>position</code></a> не наследуется, применяется ко всем элементам. <img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"> <a href="http://shpargalkablog.ru/2011/04/css-nalozhenie.html"><code>position: absolute;</code></a> вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение <code>position</code> отлично от <code>static</code>, с помощью свойств <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>. При <code>direction: ltr;</code> свойство <code>left</code> имеет приоритет над свойством <code>right</code>, кроме случаев, когда свойство <code>left</code> имеет значение <code>auto</code>.</div>
<style>
.raz {
  display: table;
}
.raz div {
  display: table-cell;
  vertical-align: top; 
}
</style>

<div>
  <div><a href="http://shpargalkablog.ru/2012/04/display-block-inline-css.html">Свойство <code>display</code></a> не наследуется, применяется ко всем элементам. Элемент со значением <code>table</code> подобен <a href="http://shpargalkablog.ru/2012/01/html-table.html">тегу <code>table</code></a>, а <code>table-cell</code> — <code>td</code>.</div>
  <div><img alt="Заяц" src="http://2.bp.blogspot.com/-RWS2ZhrFw80/U_7VcA6huTI/AAAAAAAAEtc/4d_LRNPGfQU/s100/zayats.jpg"></div>
</div>
Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.

Как выровнять текст по правому краю

Короткий текст справа

<style>
.raz {
  text-align: right;
}
</style>

<div>Короткий текст справа<div>
<style>
.raz {
  margin: 0;
  border-top: solid 2px;
  padding: 0;
  overflow: auto; 
}
.raz li {
  clear: both;
}
.raz span {
  float: right;
  white-space: nowrap; 
}
</style>

Похожие материалы:
<ol>
  <li><a href="//shpargalkablog.ru/2012/03/div-po-centru-html.html">горизонтальное выравнивание html</a> <span>обновлена</span>
  <li><a href="//shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html">вертикальное выравнивание html</a> <span>нечего добавить</span>
  <li><a href="//shpargalkablog.ru/2013/07/justify.html">выравнивание по ширине html</a> <span>хочу обновить</span>
</ol>

Как выровнять блок по правому краю

отступ справа
<style>
.raz div {
  max-width: 8em; 
  min-height: 2em;
  margin-left: auto;
  margin-right: 0;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div>HTML код</div>
</div>
отступ справа

HTML код

Элемент не влияет ни на высоту, ни на ширину родителя, не вызывает его переполнения.
<style>
.raz {
  position: relative;
  padding-right: 8em; 
}
.raz div {
  position: absolute; 
  top: 0; 
  right: 0;
  max-width: 8em;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div>HTML код</div>
  Текст
</div>

HTML код

Элемент не влияет на высоту родителя, если не очистить float.
<style>
.raz div {
  float: right; 
  max-width: 8em;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div>HTML код</div>
  Текст
</div>
<style>
.raz {
  text-align: right;
}
.raz div {
  display: inline-block; 
  max-width: 8em;
  min-height: 2em;
  border: 1px solid orange;
  text-align: start; 
  background: #fff5d7;
}
</style>

<div>
  <div>HTML код</div>
</div>

Как выровнять несколько блоков по правому краю

по умолчанию text-align margin-left float position
<style>
.raz div {
  width: 8em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
.raz {
  text-align: right;
}
.raz div {
  display: inline-block; 
  width: 8em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  vertical-align: middle; 
  text-align: start;
  background: #fff5d7;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
.raz div {
  width: 8em;
  max-width: 100%;
  min-height: 2em;
  margin: 0 0 0 auto; 
  border: 1px solid orange;
  background: #fff5d7;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
.raz div {
  float: right;
  width: 8em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
.raz::after { 
  content: "";
  display: block; 
  clear: both;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
 

<style>
.raz {
  position: relative;
  min-height: 2em;
}
.raz div {
  position: absolute;
  right: 0;
  width: 8em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
.raz div:nth-of-type(2) {
  right: 8em;
}
.raz div:nth-of-type(1) {
  right: 16em;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Два блока: один — слева, другой — справа

float text-align-last
<style>
.raz { 
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.raz div {
  float: right;
  width: 10em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
.raz div:nth-of-type(odd) {
  float: left;
  clear: right;
  background: yellow;
}
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
.raz {
  -moz-text-align-last: justify; text-align-last: justify; 
}
.raz div {
  display: inline-block;
  width: 10em;
  max-width: 100%;
  min-height: 2em;
  border: 1px solid orange;
  vertical-align: middle;
  background: #fff5d7;
}
.raz div:nth-of-type(odd) {
  background: yellow;
}
</style>

<div>
  <div></div>
  <div></div>
  <br>
  <div></div>
  <div></div>
  <br>
  <div></div>
  <div></div>
</div>

Фиксация блока относительно правой стороны родителя

<style>
.raz { 
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  background: #ccc;
  height: 100em;
}
.raz > div { 
  position: absolute;
  top: 0;
  right: 0;
}
.raz > div > div { 
  position: fixed;
}
.raz > div > div > div { 
  margin: 0 100% 0 -100%; 
  background: green;
}
</style>

<div>
  <div>
    <div>
      <div>код HTML</div>
    </div>
  </div>
</div>

inline-block: простое решение для сложных задач

В статье рассмотрены особенности работы свойства display со значением inline-block. Также приводится несколько практических примеров с применением данного свойства и решением ряда типичных проблем верстки.

Что это такое и как оно работает?

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

По отдельности эти формы представления блоков выполняют свои определенные задачи, однако в симбиозе могут охватывать достаточно широкий спектр задач. Именно поэтому был создан альтернативный вариант, который одновременно элементу присваивает функции блочного и строчного элементов — display со значением inline-block.

Блок внутри строчного элемента

Чтобы было понятнее типологию этого типа задач, представим, что нам надо вставить кнопку внутрь текста. То есть у нас будет массив какого-то текста, а где-то в определенном месте будет стоять кнопка с определенным задним фоном. Примерно это может выглядеть так

Как же это реализовать кодом? В этом нет ничего сложного, код довольно прост и в нем легко сориентироваться

HTML

<div>
Lorem ipsum dolor sit amet, consectetuer <span>adipiscing elit</span>.
 Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
 et magnis dis sociis <span     >montes</span>, nascetur ridiculus
mus. Donec quam felis, ultricies nec, <span>pellentesque</span>
 eu, pretium quis, sem.
</div>

CSS

.block0 /*обвертка текстового блока*/ {
	display:block;
	width:300px;
	margin:30px auto 0px auto;
	position:relative;
	text-align:center;
	}
.button /*код кнопки*/  {
	display:inline-block;
	background:#679bce;
	text-align:center;
	color:#fff;
	padding:3px 7px;
	border-radius:3px;
	height:23px;
	cursor: pointer;
}
Устанавливаем элемент по центру, не зная ширины

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

К примеру, у нас имеется картинка, а снизу от нее будет расположена кнопка, при нажатии на какую можно будет оставлять комментарий. Эта кнопка должна располагаться по центру блока. Для этого нашей кнопке прописываем display: inline-block;. А родительскому тегу необходимо задать выравнивание текста по центру. Код этого решение будет выглядеть следующим образом:

HTML

<div>
	<img src="img.jpg" title="Пример" alt="Картинка">
	<div>Комментировать</div>
</div>

CSS

.block0 {
	display:block;
	width:250px;
	margin:30px auto 0px auto;
	position:relative;
	padding:15px;
	background:#eee;
	text-align:center;/*центрирует нашу кнопку*/
	}
.button {
	display:inline-block;
	// display: inline; /* для IE6-7,
 которым неведом inline-block */
	background:#679bce;
	text-align:center;
	color:#fff;
	padding:3px 7px;
	border-radius:3px;
	height:23px;
	cursor: pointer;
	margin-top:9px;
}

В браузере это будет выглядеть так:

Выравниваем элементы списка с разной высотой

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

Для решения этой проблемы отлично подойдет свойство float, однако есть одно маленькое «но». Такое решение справедливо, если установлена фиксированная высота. Для универсальности будем рассматривать резиновые блоки, которые будут выравниваться при любой высоте и любом количестве текста.

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

Наиболее просто и действенный способ – опять обратиться к возможностям inline-block. Запишем следующий код:

HTML

<ul>
	<li><img src="img2.png" title="Пример1" alt="Картинка1">
		Картинка 1</li>
	<li><img src="img2.png" title="Пример2" alt="Картинка2">
		Картинка 2</li>
		…
</ul>

CSS

.ul {
	display:block;
	width:330px;
	margin:30px auto 0px auto;
	position:relative;
	padding:5px;
	background:#eee;
	text-align:center;/*центрирует нашу кнопку*/
	}
li {
	display:inline-block;
	// display: inline; /* для IE6-7, которым неведом inline-block */
	vertical-align:top;
	text-align:center;
	margin:5px 5px;
	width:150px;
}
img {
	display:block;
	width:150px;
}

А вот так будет выглядеть наш практический пример в браузере

Кроме того, при использовании inline-block в комплексе с line-height можно заставить работать свойство vertical-align, которое предназначено для работы в текстовом блоке или в ячейках таблицы.

В каких браузерах работает?

6.0+ 4.0+ 10.5+ 4.0+ 3.6+

Оценок: 4 (средняя 5 из 5)

  • 2269 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Выравнивание элементов. align-items и align-self

Выравнивание элементов. align-items и align-self

Последнее обновление: 18.04.2017

Свойство align-items

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

  • stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера

  • flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера

  • flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера

  • center: элементы выравниваются по центру flex-контейнера

  • baseline: элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				height:5em;
			}
			.flex-start{
				align-items: flex-start;
			}
			.flex-end{
				align-items: flex-end;
			}
			.center{
				align-items: center;
			}
			.baseline{
				align-items: baseline;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
				
			}
			.largest-item{ 
				padding-top:2em;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
        </style>
    </head>
    <body>
		<h4>Flex-start</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Flex-end</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Center</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Baseline</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
</html>

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:


.flex-container {
	display: flex;
	border:1px #ccc solid;
	flex-direction:column;
	width:12em;
}

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение «auto»:

  • auto: значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch.

  • stretch

  • flex-start

  • flex-end

  • center

  • baseline


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border:1px #ccc solid;
				justify-content: space-between;
				align-items: stretch;
				height:12em;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.2em;
				color: white;
			}
			.item1 {background-color: #675BA7; align-self: center; }
			.item2 {background-color: #9BC850; align-self: flex-start;}
			.item3 {background-color: #A62E5C; align-self: flex-end;}
			.item4 {background-color: #2A9FBC; align-self: center;}
        </style>
    </head>
    <body>
		<h4>Align-self</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
</html>

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch;. Однако каждый из элементов переопределяет это поведение:

Как создать плавающую кнопку на сайте html + css

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

Принцип действия всех таких кнопочек основывается на свойстве position: fixed; Рассмотрим html структуру ниже:

<div>Бонус!</div>

<style>
.fixedbut { position: fixed; bottom: 20px; right: 20px; display: block; background: #2db700; color: #fff; text-decoration: none; padding: 6px 23px; font-size: 17px;}
.fixedbut:hover { background: #222; }
</style>

Мы создали простую кнопку с классом fixedbut, на которую назначили стиль. В стиле самое главное обратите на свойство position: fixed; — оно и позволяет кнопке всегда «плавать» на экране сайта, а bottom: 20px; right: 20px; устанавливают ее снизу, справа. Чтобы кнопка была по левому краю измените right на left. Остальные стили для красоты.

Но наша кнопка не активна на клик. Давайте добавим переход на любую страницу, по ее клику. Это можно сделать так:

<div>Бонус!</div>

или с помощью обычной ссылки:

<a href=»/o-nas/»>Бонус!</a>

В первом случае мы использовали JavaScript, а во втором html разметку.

Если вам требуется кнопка наверх, то можете в обоих случаях значение ссылки заменить на #. Страница перематывается наверх при клике на кнопку.

Рассмотрим еще пару плюшек, которые вам могут пригодиться не только в этом проекте.

1. Чтобы кнопка (да и любой элемент, на который может назначаться псевдокласс :hover) плавно меняла цвет, добавьте в класс fixedbut свойство: -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out;
2. Если вам нужно запретить срабатывание клика по ссылке или выполнение скрипта, добавьте свойство: pointer-events: none; Например, при клике на ссылку: <a href=»/o-nas/»>Бонус!</a> перехода по ссылке не произойдет.
3. Чтобы при клике на ссылку, страница открылась в новой вкладке, добавьте атрибут target=»_blank».

 

Читайте также

blogprogram.ru | 2017-03-30 | Как создать плавающую кнопку на сайте html + css | Наверняка вы видели на многих сайтах кнопки, которые двигаются одновременно с прокруткой страницы. Частым примером таких кнопок может быть акция, зака | http://blogprogram.ru/wp-content/uploads/2017/01/547-131×131.jpg

match_constraints, инструменты в toolbar, guidelines, aspect ratio

Продолжаем рассматривать возможности ConstraintLayout. 

 

 

 

match_constraints

В ConstraintLayout мы, как и раньше, можем в качестве ширины/высоты View использовать wrap_content или указать фиксированный размер в dp. А вот match_parent здесь использовать не рекомендуется. В хелпе написано следующее:
You should not use match_parent for any view in a ConstraintLayout. Instead use «match constraints» (0dp)

Нам взамен match_parent предлагают использовать match_constraints, он же 0dp. Если match_parent растягивает View по размеру родителя, то с match_constraints View займет пространство, доступное между объектами, к которым он привязан. 

 

Давайте посмотрим все три режима на примере TextView, который привязан к левой границе слева и к кнопке справа.

wrap content

Ширина по содержимому

 

фиксированный размер

Явно указываем ширину в 150dp

 

match constraints (0dp)

TetxView растянут между объектами привязок.

 

Эти режимы можно переключать в Properties не только через layout_width свойство, но и нажатием на специальный значок

Обратите внимание, что этот значок меняется в зависимости от режима. При wrap_content он выглядит как елочка, при фиксированном размере — как отрезок, а при match_constraints — как пружина.

 

Т.к. match_constraints растягивает ваше View между объектами привязок, то ему нужна двусторонняя привязка. Если ваше View привязано, например, только слева, а правой привязки нет, то match_constraints будет работать как wrap_content.

 

 

 

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

Вы можете использовать двустороннюю привязку, чтобы выровнять два View по центру.

И можно использовать скролл, чтобы менять положение относительно центра.

 

 

 

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

Допустим, у нас есть два TextView с разными размерами шрифтов. И нам надо поместить их рядом так, чтобы тексты лежали на одной линии.

 

View можно выровнять по нижней границе сделав привязку между нижними границами

Но в этом случае тексты будут не на одной линии.

Чтобы это исправить, можно использовать выравнивание по тексту

В этом случае тексты находятся на одной линии, а нижние границы — нет.

 

 

 

Инструменты в toolbar

В toolbar есть несколько инструментов, которые могут помочь в работе.

Я пронумеровал их на скриншоте. Пойдем по порядку.

 

 

1) Показать/скрыть привязки

Если включено, то вы будете видеть все свои привязки на экране. Если выключено, то видны будут только привязки выделенного View.

 

 

2) Автопривязки

Если включено, то вы сможете создавать привязки к родителю, если поднесете View к границе родителя.

 

Либо можно создать двустороннюю привязку, если поднести View к центру родителя

 

 

3) Удалить все привязки

По нажатию этой кнопки все ваши привязки на экране будут удалены. Если нечаянно нажали, то жмите CTRL+Z и все вернется.

 

 

4) Создать привязки

Создает привязки для всех View на экране. Но делает это не очень хорошо. Возможно в будущих версия исправят, но пока что я не советую использовать.

 

 

5) Отступ

Здесь вы можете автоматически задать, какой отступ будет использован по умолчанию при создании привязки.

Первая привязка создалась с отступом 8. Затем я поменял значение по умолчанию на 24. И вторая привязка создалась уже с отступом 24.

 

 

6) Разное

В этом пункте три типа операций над View

 

Собрать

Собираем вместе несколько выделенных View сначала по горизонтали, затем по вертикали.

Эта операция не создает никаких привязок.

 

Растянуть

Растянет View между ближайшими объектами.

 

Можно равномерно растянуть несколько объектов

 

Эта операция не создает никаких привязок.

 

Разместить равномерно

Поможет равномерно разместить View

 

 

 

7) Выравнивание

По горизонтали: по левому краю, по центру, по правому краю

  

По вертикали: по тексту, по нижнему краю, по центру, по верхнему краю

 

Нижний ряд кнопок — это центрирование. Оно создает двухстороннюю привязку. Есть два режима. 

 Обычный, когда привязка создается к близлежащим объектам

 

И родительский, когда привязка создается к границам родителя.

 

 

 

8) Направляющие

Это линии, которые вы можете использовать для создания привязок.

Рассмотрим пример с вертикальной направляющей. Добавим ее на экран и отрегулируем положение

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

 

 

Рассмотрим пару примеров использования

Простой

С помощью направляющей разделяем ширину экрана на два TextView

 

 

Пример посложнее

 Здесь уже несколько направляющих, с помощью которых мы построили сетку из TextView

 

 

 

Соотношение сторон (Aspect ratio)

Рассмотрим на примере высоты View. Если у View есть двусторонняя вертикальная привязка и значение высоты установлено в match_constraints (0dp), то View растянется по высоте между объектами привязки. Мы можем настроить так, чтобы высота в этом случае не растягивалась, а зависела от ширины View.

 

Это делается так

Для View с двусторонней вертикальной привязкой ставим значение высоты в 0dp. View растягивается по высоте. Затем, включаем режим соотношения сторон, нажав на треугольник. Задаем соотношение ширины к высоте — 3 к 1. Т.е. высота теперь будет в три раза меньше ширины.

 

Меняем ширину, добавляя в TextView текст

С изменением ширины меняется и высота, чтобы соблюдалось установленное соотношение сторон 3:1.

 

 

Если у вас для View есть горизонтальная и вертикальная двусторонние привязки и для высоты и ширины установлено значение match_constraints, то вы можете переключать соотношение сторон: высота зависит от ширины или ширина от высоты. Для переключения надо нажать на треугольник

 

Сначала соотношение сторон выключено

Высота и ширина View не зависят друг от друга.

 

Затем мы включаем режим, когда высота зависит от ширины. В квадрате справа сверху появляется жирная вертикальная линия.

При изменении ширины меняется высота. А вручную изменить высоту не получается.

 

Затем ширина зависит от высоты. В квадрате справа сверху появляется жирная горизонтальная линия.

При изменении высоты меняется ширина. А вручную изменить ширину не получается.

 

 

 

Существует еще пара интересных возможностей ConstraintLayout: chains и barriers. О них будет следующий урок.

 


Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование 

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме 



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

CSS в основном используется для обеспечения наилучшего стиля веб-страницы HTML. Используя CSS, мы можем указать расположение элементов на странице.

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

  • text-align: center — путем установки значения свойства text-align родительского тега div в центр.
  • margin: auto — путем установки значения свойства margin на auto.
  • display: flex — путем установки значения свойства display как flex и значения свойства justify-content на center .
  • display: grid — путем установки значения свойства отображения на сетку.

Давайте разберемся с описанными выше методами с помощью некоторых иллюстраций.

Пример

В этом примере мы используем свойство text-align и устанавливаем его значение в центр .Его можно разместить в теге body или в родительском теге div элемента.

Здесь мы размещаем text-align: center; в родительском теге div элемента кнопки.

Кнопка выравнивания по центру <стиль> .контейнер{ выравнивание текста: центр; граница: сплошной красный цвет 7 пикселей; ширина: 300 пикселей; высота: 200 пикселей; padding-top: 100 пикселей; } #btn { размер шрифта: 25 пикселей; }

Проверить это сейчас

Выход

Пример

В этом примере мы используем display: grid; свойство и маржа: авто; недвижимость.Здесь мы размещаем дисплей : сетка; в родительском теге div элемента кнопки.

Кнопка будет размещена в центре горизонтального и вертикального положения.

Кнопка выравнивания по центру <стиль> .container { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошной красный; дисплей: сетка; } кнопка { цвет фона: светло-голубой; черный цвет; размер шрифта: 25 пикселей; маржа: авто; } п{ размер шрифта: 25 пикселей; }

В этом примере мы используем display: grid; и margin: auto; свойства

Проверить это сейчас

Выход

Пример

Это еще один пример размещения кнопки в центре.В этом примере мы используем дисплей : flex; недвижимость, justify-content: центр; собственности и align-items: center; недвижимость.

Этот пример поможет нам разместить кнопку в центре горизонтального и вертикального положения.

Кнопка выравнивания по центру <стиль> .container { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошной красный; дисплей: гибкий; justify-content: center; align-items: center; } кнопка { цвет фона: светло-голубой; черный цвет; размер шрифта: 25 пикселей; }

Проверить это сейчас

Выход


Центральная кнопка CSS

В этом руководстве объясняется, как центрировать кнопку CSS .

Центральная кнопка CSS

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

Вы можете выровнять кнопку CSS по центру, используя следующий метод:

1.Поместив свойство text-align тега body в центр (text-align: center)

В этом примере мы используем свойство `text-align` center в теге , поэтому все внутри тега будет выровнено по центру автоматически.

  


     Кнопка выравнивания по центру 
    <стиль>
        тело {
            выравнивание текста: центр;
        }
    


    

  

Код запуска

Выход

2.Установив свойство

text-align родительского тега div на center ( text-align: center )

В этом примере ниже мы используем свойство `text-align` center в теге

с классом (button-container-div), поэтому все внутри этого
будет автоматически выровнено по центру. .

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            выравнивание текста: центр;
            граница: сплошной коралл 1px;
            высота: 40vh;
            ширина: 50вв;
        }
    


    

Код запуска

Выход

3. Центральная кнопка CSS с использованием поля

автоматически (поле : авто )

В этом примере мы используем свойство `margin` auto.Margin auto перемещает div в центр экрана.

  



    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            маржа: авто;
        }
    


    

Код запуска

4.Центральная кнопка CSS с фиксированным положением

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

  




    
     Кнопка выравнивания по центру 
    <стиль>
        кнопка {
           положение: фиксированное;
           осталось: 50%;
        }
    


    

Код запуска

4.Установив для свойства

display значение flex ( display: flex )

В этом примере мы используем свойство `display`, flex, ` justify-content` и `align-items` для родительского тега

с классом (button-container-div). Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  • Изгиб дисплея переместит его к центру по вертикали.
  • Justify-content перемещает кнопку в центр по горизонтали.
  • Центр выравнивания элементов сохраняет его в центре; в противном случае он будет начинаться с div и идти внизу div.
  




    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: гибкий;
            justify-content: center;
            align-items: center;
        }
    


    

Код запуска

Выход

 

3.Установив для свойства

display значение grid ( display: grid )

В этом примере мы используем свойство сетки `display` в теге

с классом (button-container-div) . Кнопка внутри
займет место в центре вертикального и горизонтального положения.

  


    
     Кнопка выравнивания по центру 
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: сетка;
        }
        кнопка {
            цвет фона: малиновый;
            цвет: #fff;
            граница: сплошная 1px;
            отступ: 10 пикселей;
            ширина: 100 пикселей;
            наброски: нет;
            маржа: авто;
        }
    


    

Код запуска

Выход

CSS: центрирующие элементы

CSS: центрирующие элементы

См. Также указатель всех подсказок.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений. Фактически, существует три вида центрирования:

В последних реализациях CSS вы также можете использовать функции из уровень 3, позволяющий центрировать абсолютно позиционированные элементы:

Центрирование строк текста

Самый распространенный и (следовательно) самый простой тип центрирования — это строк текста в абзаце или заголовке. CSS имеет свойство text-align для этого:

П {выравнивание текста: центр}
h3 {text-align: center} 

отображает каждую строку в P или в h3 с центром между ее поля, например:

Все строки в этом абзаце по центру между полями абзаца благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

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

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...

Это скорее ...

Этот довольно узкий блок текста по центру. Обратите внимание, что линии внутри блока не центрированы (они выровнены по левому краю), в отличие от предыдущего примера.

Это также способ центрировать изображение: превратить его в блок свой собственный и примените к нему свойства поля. Например:

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
... 

Следующее изображение отцентрировано:

Вертикальное центрирование

CSS level 2 не имеет свойства для центрирования вещей вертикально.Вероятно, он будет на уровне CSS 3 (см. Ниже). Но даже в CSS2 вы можете центрировать блоки по вертикали, объединив несколько характеристики. Хитрость заключается в том, чтобы указать, что внешний блок должен быть форматируется как ячейка таблицы, потому что содержимое ячейки таблицы можно центрировать по вертикали .

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

Этот небольшой абзац ...

Этот небольшой абзац расположен по центру вертикально.

Вертикальное центрирование в уровне CSS 3

CSS level 3 предлагает другие возможности. В это время (2014 г.) хороший способ центрировать блоки по вертикали без использования абсолютного позиционирование (которое может привести к наложению текста) все еще ниже обсуждение.Но если вы знаете, что перекрывающийся текст не будет проблема в вашем документе, вы можете использовать свойство ‘transform’, чтобы центрировать абсолютно позиционированный элемент. Например:

Этот абзац выровнен по центру.

Для документа, который выглядит так:

Этот абзац…

таблица стилей выглядит так:

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * / 

Основные правила:

  1. Сделайте контейнер относительно позиционированным, который объявляет он должен быть контейнером для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его наполовину в емкость с надписью «верх: 50%».(Обратите внимание, что 50% ‘здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх на половину его собственной высоты. (В ‘50%’ в ‘translate (0, -50%)’ относится к высоте элемента сам.)

Недавно (примерно с 2015 г.) стала еще одна техника доступен в нескольких реализациях CSS. Он основан на новом Ключевое слово flex для свойства display. Это ключевое слово имеет в виду для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает от использования его в документе, если документ имеет правильная структура.

Этот абзац выровнен по центру.

таблица стилей выглядит так:

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

Центрирование по вертикали и горизонтали в уровне CSS 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и вертикально одновременно.

Побочным эффектом абсолютного позиционирования абзаца является что тогда он будет ровно настолько широким, насколько он должен быть (если мы не дадим ему явная ширина, конечно).В приведенном ниже примере это именно то, что мы хотим: мы центрируем абзац всего одним словом («По центру!»), Поэтому ширина абзаца должна быть точно ширина этого слова.

Желтый фон показывает, что абзац на самом деле только настолько, насколько велико его содержание. Мы предполагаем ту же наценку, что и перед:

По центру!

Таблица стилей аналогична предыдущему примеру в отношении к вертикальному центрированию.Но теперь мы переместим элемент наполовину по всему контейнеру, с ‘left: 50%’, и в то же время время переместите его влево на половину его собственной ширины в ‘translate’ трансформация:

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

Следующий пример ниже объясняет, почему «margin-right: -50%» нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

с этой таблицей стилей:

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

, то есть единственное дополнение — это «justify-content: center». Только как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ определяет горизонтальное выравнивание.(На самом деле это немного сложнее, так как их имена предлагаю, но в простом случае это работает именно так.) Побочный эффект из ‘flex’ заключается в том, что дочерний элемент, P в данном случае, является автоматически делается как можно меньше.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае браузера это означает окно браузера). Так центрировать элемент в области просмотра очень просто. Вот полный пример.(В этом примере используется синтаксис HTML5.)


  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        заполнение: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
    

Красиво по центру

Этот текстовый блок центрирован по вертикали.

И по горизонтали, если окно достаточно широкое.