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

• Как выровнять текст по ширине
• Как выровнять меню по ширине
• Как выровнять картинки по ширине
• Как равномерно распределить блоки
• Как сделать, чтобы одна ссылка была слева строки, а другая справа?
• Как выровнять текст по середине CSS
• Как выровнять текст по центру 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. Оно управляет только поведением крайней строки абзаца.

пункт меню 1 пункт меню 2 пункт меню 3

<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>

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

пункт меню 1 пункт меню 2 пункт меню 3

<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>