Выровнять текст, картинки или блоки div по ширине | text-align-last | CSS

Как выровнять текст по ширине

Что значит выровнять текст по ширине? Это значит, что он будет прижат к обоим сторонам, его края слева и справа будут ровными. Чтобы браузер не растягивал пробелы, отчего текст становится плохо читаемым, нужно настроить перенос слов. Реализуется он очень просто с помощью того же CSS. Даже дефисы при необходимости ставятся с соблюдением правил русского языка.
<style>
#text {
  -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ 
  text-align: justify;
}
</style>

<div id="text" lang="ru">содержимое</div>

Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.

<style>
#menu {
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
#menu a {
  display: inline-block;
  white-space: nowrap;
}
</style>

<nav id="menu">
  <a href="#1">пункт меню 1</a>
  <a href="#2">пункт меню 2</a>
  <a href="#3">пункт меню 3</a>
</nav>

Поддержка браузерами ограничена, но можно немного пошаманить:

<style>
#menu1 {
  border: 1px solid #ccc; /* предотвращаем схлопывание */ 
  text-align: justify;
}
#menu1 a {
  position: relative;
  top: 1.6em; /* ваше значение line-height */ 
  display: inline-block;
  white-space: nowrap;
}
#menu1:after { /* искусственно добавляем последнюю строчку */ 
  content: '';
  display: inline-block;
  width: 100%;
}
#menu1:before {
  content: '';
  display: block;
  width: 100%;
  margin-bottom: -1.6em; /* ваше значение line-height */ 
}
</style>

<nav id="menu1">
  <a href="#1">пункт меню 1</a>
  <a href="#2">пункт меню 2</a>
  <a href="#3">пункт меню 3</a>
</nav>

Как выровнять картинки по ширине

пузырьки пузырьки пузырьки пузырьки
<style>
#img {
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
</style>

<div id="img">
  <img src="" alt=""/>
  <img src="" alt=""/>
  <img src="" alt=""/>
</div>

Как равномерно распределить блоки, если сайт резиновый

Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.

Смайлик большой палец вверх
Смайлик большой палец вверх
Древний российский город Аркаи́м
Древний российский город Аркаи́м
Весёлый паровозик
Весёлый паровозик
Ура
Ура
<style>
#div {
  background: #fff5d7;
  text-align: justify;
  -moz-text-align-last: justify; text-align-last: justify;
}
#div figure {
  display: inline-block;
  margin: 10px 0;
  padding: 5px;
  background: #fff;
  vertical-align: top;
}
#div img, #div figcaption {
  display: block;
  margin: 0 auto;
  text-align: center;
  -moz-text-align-last: center; text-align-last: center;
}
#div img {
  max-width: 190px;
}
#div figcaption {
  width: 190px;
}
@media (max-width: 440px) {
  #div {
    text-align: center;
    -moz-text-align-last: center; text-align-last: center;
  }
  #div figure {
    display: block;
  }
  #div img {
    max-width: auto;
  }
  #div figcaption {
    width: auto;
  }
}
</style>

<div id="div">
  <figure>
    <img src="" alt=""/>
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
  <figure>
    <img src="" alt="">
    <figcaption>аннотация</figcaption>
  </figure>
</div>
в f t
наверх ↑

4 комментария:

Анонимный
Здравствуйте!
У меня вот какая проблема.

div class="left_block" /div
div class="right_block" /div


style

div.left_block {
float:left;
width:200px;
height:55px;
background-color:red;

}
div.right_block {
float:left;
width:200px;
background-color:green;
height:55px;
margin-left:25%;

}

/style

Имеется код. Я хотел бы что-бы зелёный ДИВ не доходил бы до красного примерно сантиметр. То есть сначала он смещается. Когда между ними 1 см. он просто прекращал сближение. Появлялась бы горизонтальная прокрутка. А не прыгал бы вниз как теперь. Не подскажите можно ли так сделать. Буду очень благодарен.
До свидания.
Анонимный
… Извините я имел ввиду не доходил и его движение. Когда делаешь меньше окно открытого браузера.
NMitra
Здравствуйте, нужен родитель (пример http://jsfiddle.net/NMitra/b36w4eqL/ )

<div class="vyrovnyat">
<div class="left_block">какой-то текст</div>
<div class="right_block">какой-то текст</div>
</div>

<style>
.vyrovnyat {
min-width:450px;
}
.vyrovnyat:after { /*очистить float */
content: "";
display: table;
clear:both;
}
div.left_block {
float:left;
width:200px;
height:55px;
background-color:red;
}
div.right_block {
float:right;
width:200px;
background-color:green;
height:55px;
}
</style>
Анонимный
Здравствуйте!!!
Блииин! Огромное Вам спасибо. Вы столько раз меня уже выручали. Благодарю Вас. СПАСИБО!!!