Css выравнивание по правому краю: CSS. Выравнивание блочного элемента по правому краю.

Leave a Comment / Css / By /

HTML5 | Выравнивание элементов. justify-content

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

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

  • flex-элементы не используют все пространство flex-контейнера

  • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

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

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

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

  • space-between: если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start. В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами

  • space-around: если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению

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

Выравнивание для расположения элементов в виде строки:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				border:1px #ccc solid;
			}
			.flex-end{
				justify-content: flex-end;
			}
			.center{
				justify-content: center;
			}
			.space-between{
				justify-content: space-between;
			}
			.space-around{
				justify-content: space-around;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.5em;
				color: white;
			}
			.
 
 color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
			.color5 {background-color: #F15B2A;}
        </style>
    </head>
    <body>
		<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>Space-between</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
		<h4>Space-around</h4>
		<div>
			<div>Flex Item 1</div>
			<div>Flex Item 2</div>
			<div>Flex Item 3</div>
			<div>Flex Item 4</div>
		</div>
	</body>
</html>

Выравнивание при расположении в виде столбцов:

НазадСодержаниеВперед

html — Позиционирование div блоков по левому и правому краю

Задать вопрос

Вопрос задан

Изменён 5 лет 6 месяцев назад

Просмотрен 17k раз

Есть родительский элемент . inputfields, у которого есть блок #buttonsleft, из трех кнопок, выравненный по левому краю, и #buttonsright, который должен быть выравнен по правому краю.

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

p, h2, form, button {
    border: 0;
    margin: 0;
    padding: 0;
}

.mystyle {
    border: solid 2px burlywood;
    background-color: antiquewhite;
    border-radius: 5px;
}

.inputfields {
  display: inline;
  
}


.mystyle h2 {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}



#buttonsright {
  float: right;
  width: 30%;
}

#buttonsleft {
  float: left;
  width: 30%;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div>
<h2>All values</h2>
<div>
    <div>
        <INPUT TYPE="BUTTON" VALUE="<1-1>">
        <INPUT TYPE="BUTTON" VALUE="<1-2>">
        <INPUT TYPE="BUTTON" VALUE="<1-3>">       
    </div>
    <div>
        <INPUT TYPE="BUTTON" VALUE="<2-1>">
        <INPUT TYPE="BUTTON" VALUE="<2-2>">
        <INPUT TYPE="BUTTON" VALUE="<2-3>">
    </div>
</div>

Проблема в позиционировании #buttonsright. Они либо выстраиваются по вертикали с левого края, либо же с правого, но ниже чем кнопки из блока #buttonsleft. Собственно вопрос — как сделать чтобы блоки кнопок располагались ровно напротив друг друга?

При этом все элементы находятся .mystyle и, при использовании float, выпадают за границы mystyle

  • html
  • css

Возможно, вот такой вариант вам подойдет:

.inputfields {
  display: inline;
}

.inputfields:after {
  content: "";
  display: table;
  clear: both;
}

#buttonsright {
  float: right;
  width: 30%;
}

#buttonsleft {
  float: left;
  width: 30%;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div>
  <h2>All values</h2>
  <div>
    <br>
    <div>
      <INPUT TYPE="BUTTON" VALUE="<1-1>">
      <INPUT TYPE="BUTTON" VALUE="<1-2>">
      <INPUT TYPE="BUTTON" VALUE="<1-3>">
    </div>
    <div>
      <INPUT TYPE="BUTTON" VALUE="<2-1>">
      <INPUT TYPE="BUTTON" VALUE="<2-2>">
      <INPUT TYPE="BUTTON" VALUE="<2-3>">
    </div>
  </div>
</div>

5

flex’Ы для этого и создали. …

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

p,
h2,
form,
button {
  border: 0;
  margin: 0;
  padding: 0;
}

.mystyle {
  border: solid 2px burlywood;
  background-color: antiquewhite;
  border-radius: 5px;
}

.inputfields {
  display: flex;
  width: auto;
  height: auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: orange;
}

.mystyle h2 {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

#buttonsright {
  display: flex;
  height: auto;
  width: 30%;
  flex-direction: column;
  justify-content: center;
}

#buttonsleft {
  display: flex;
  height: auto;
  width: 30%;
  flex-direction: column;
  justify-content: center;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div>
  <h2>All values</h2>
  <div>
    <div>
      <INPUT TYPE="BUTTON" VALUE="<1-1>">
      <INPUT TYPE="BUTTON" VALUE="<1-2>">
      <INPUT TYPE="BUTTON" VALUE="<1-3>">
    </div>
    <div>
      <INPUT TYPE="BUTTON" VALUE="<2-1>">
      <INPUT TYPE="BUTTON" VALUE="<2-2>">
      <INPUT TYPE="BUTTON" VALUE="<2-3>">
    </div>
  </div>

7

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS Выравнивание текста и направление текста

❮ Предыдущий Далее ❯

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

В этой главе вы узнаете о следующих свойствах:

  • text-align
  • последнее выравнивание текста
  • направление
  • Юникод-биди
  • вертикальное выравнивание

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

Свойство text-align используется для установки горизонтального выравнивания текста.

Текст может быть выровнен по левому или правому краю, по центру или по ширине.

В следующем примере показан текст с выравниванием по центру и по левому и правому краю (выравнивание по левому краю используется по умолчанию, если направление текста слева направо и справа выравнивание по умолчанию, если направление текста справа налево):

Пример

h2 {
  text-align: center;
}

h3 {
  выравнивание текста: по левому краю;
}

h4 {
  текстовое выравнивание: по правому краю;
}

Попробуйте сами »

Когда для свойства text-align установлено значение «по ширине», каждая строка растянуты так, что каждая строка имеет одинаковую ширину, а левое и правое поля равны прямо (как в журналах и газетах):

Пример

div {
  text-align: justify;
}

Попробуйте сами »

Text Align Last

Свойство text-align-last указывает, как выравнивать последнюю строку текста.

Пример

Выровнять последнюю строку текста в трех элементах

:

в год {
последнее выравнивание текста: справа;
}

п.б. {
последнее выравнивание текста: центр;
}

шт. {
  text-align-last: по ширине;
}

Попробуйте сами »

Направление текста

Направление и Свойства unicode-bidi можно использовать для изменения направления текста элемента:

Пример

p {
  direction: rtl;
  unicode-bidi: двунаправленное переопределение;
}

Попробуйте сами »

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

Свойство vertical-align устанавливает вертикальное выравнивание элемента.

Пример

Установка вертикального выравнивания изображения в тексте: 

img. a {
 vertical-align: baseline;
}

изображение б {
вертикальное выравнивание: текст сверху;
}

img.c {
  вертикальное выравнивание: текст внизу;
}

img.d {
  vertical-align: sub;
}

img.e {
  вертикальное выравнивание: супер;
}

Попробуйте сами »

Свойства выравнивания/направления текста CSS

Свойство Описание
направление Указывает направление текста/направление письма
выравнивание по тексту Задает горизонтальное выравнивание текста
последнее выравнивание текста Указывает, как выравнивать последнюю строку текста
Юникод-биди Используется вместе со свойством direction, чтобы установить или вернуть значение, указывающее, следует ли переопределять текст для поддержки нескольких языков в одном документе
вертикальное выравнивание Устанавливает вертикальное выравнивание элемента

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3. CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — Как правильно выровнять элементы div?

Задавать вопрос

спросил

Изменено 20 дней назад

Просмотрено 1,8 млн раз

Тело моего HTML-документа состоит из 3 элементов: кнопки, формы и холста. Я хочу, чтобы кнопка и форма были выровнены по правому краю, а холст оставался выровненным по левому краю. Проблема в том, что когда я пытаюсь выровнять первые два элемента, они больше не следуют друг за другом, а вместо этого располагаются рядом друг с другом по горизонтали? Вот код, который у меня есть до сих пор, я хочу, чтобы форма следовала сразу после кнопки справа без пробела между ними.

 #cTask {
  цвет фона: светло-зеленый;
}
#кнопка {
  положение: родственник;
  поплавок: справа;
}
#addEventForm {
  положение: родственник;
  поплавок: справа;
  граница: 2 пикселя сплошная #003B62;
  семейство шрифтов: verdana;
  цвет фона: #B5CFE0;
  отступ слева: 10px;
} 
 

<голова>   

<тело bgcolor="000" ТЕКСТ="FFFFFF">
  <дел>
    <тип кнопки="кнопка">
        Создать задачу
<дел> <форма>

<дел> <холст>

Ваш браузер не поддерживает холст.

  • CSS
  • HTML

0

С плавающей запятой все в порядке, но с IE 6 и 7 возникают проблемы.
Я бы предпочел использовать во внутреннем div следующее:

 margin-left: auto;
поле справа: 0;

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

15

Вы можете создать div, который содержит форму и кнопку, а затем сделать div плавающим вправо, установив поплавок: правый; .

6

Старые ответы. Обновление: используйте flexbox, теперь он работает практически во всех браузерах.

 <дел>
  
Я справа