Как в html сделать текст справа – Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому? — Вебджем.рф

Содержание

Как сделать текст в HTML (топ 10 запросов)

Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.

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


Хорошего Вам дня!

Текст, всегда заключают, между тегами, например, внутри абзаца.


<p>Пожелайте мне удачи!</p>

Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.

Как сделать текст в центре

По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега

div, выравнивает текст по центру.


<div>Поставьте меня в центр</div> // HTMLdiv {

    text-align: center;  // CSS

}

Как сделать текст справа


<div>Хочу стоять справа</div> // HTMLdiv {

    text-align: right;  // CSS

}

Как сделать отступ текста

За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.


<p>Отодвинься от меня</p> // HTML
 p {

    margin: 20px;  // CSS

    padding: 10px;

}

Как сделать текст жирным

Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.


<p>Хочу быть <b>жирным</b></p> // HTML

или выделять участок тегом span и задавать степень жирности в CSS правилах.


<p>Хочу быть <span>самым жирным</span></p> // HTMLspan {

    font-weight: bolder;  // CSS

}

или указывать жирность в цифрах.


span {

    font-weight: 700;  // в интервале 100 - 900

}

Как сделать ссылку в тексте

Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.


<p>Вам следует перейти по этой <a href="http://yandex.ru">ссылке</a></p> // внешняя ссылка 

<p>У меня тут есть <a href="page_5.html">хорошая статья</a></p> // внутренняя ссылка

Как сделать текст в рамке

Рамка задается не тексту, а блочному тегу, в котором находится этот текст.


<p>Я - важный текст</p> // HTMLp {

    border: 2px solid pink;  // толщина, сплошная, цвет

    padding: 15px; // воздух между рамкой и текстом

}

Как сделать текст подчеркнутым

Нужное место, обрамляем тегом u.


<p>Прошу здесь <u>подчеркнуть</u> меня</p> // HTML

Как задать тексту фон

Сделать фон для всего абзаца.


<p>Хочу выделиться фоном</p> // HTMLp {

    background-color: pink;  // CSS

}

Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.


<p>Нет, только <span>розовый цвет</span></p> // HTMLspan {

    background-color: pink;  // CSS

}

Как увеличить текст


<p>Посмотрите, какой я большой</p> // HTML
 p {

    font-size: 30px;  // CSS

}

Как сделать текст курсивом

Через тег i в разметке.


<p>Здесь я прямой, а тут - <i>курсивом</i></p> // HTML

CSS стили + тег


<p><span>Курсивом</span> - я особенный</p> // HTMLspan {

    font-style: italic;  // CSS

}

Итого

Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.

Создано 29.07.2019 10:29:18
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Выравнивание текста по центру, ширине и по краям

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

left — выравнивает текст по левому краю.
right — выравнивает текст по правому краю.
center — выравнивает текст по центру.
justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 { text-align:center; }
      p.date { text-align:right; }
      p.main { text-align:justify; } /*значение justify растягивание текста по ширине*/
      p { text-indent:30px; } /*задаем размер отступа для первой строки абзаца*/
    </style>
  </head>

  <body>
    <h2>Пример выравнивания текста</h2>
    <p>февраль, 2012</p>
    <p>Помимо выравнивания текста, для первой строки абзаца был задан небольшой 
    отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень 
	 пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.</p>
  </body>
</html>

Попробовать »

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

С этой темой смотрят:

text-align | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1	`text-align: center \| justify \| left \| right \| inherit`
CSS3	`text-align: center \| justify \| left \| right \| start \| end`

Значения

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left: Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
auto: Не изменяет положение элемента.
inherit: Наследует значение родителя.
start: Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end: Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Изображения в тексте | htmlbook.ru

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок по центру</title>
  <style type="text/css">
   P.fig {
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body> 
  <p>
   <img src="images/sample.gif" alt="Иллюстрация">
  </p>
 </body>
</html>

В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" 
  alt="Иллюстрация" align="left" 
  vspace="5" hspace="5">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

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

Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
  <style type="text/css">
   IMG.fig {
    float: right; /* Обтекание картинки по левому краю */
    padding-left: 10px; /* Отступ слева */
    padding-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body> 
  <p><img src="images/sample.gif" 
  alt="Иллюстрация">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

В данном примере к тегу <img> добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td>. В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   TD.leftcol {
    width: 110px; /* Ширина левой колонки с рисунком */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr> 
    <td><img src="images/igels.png" 
    alt="Вы не поверите, но это 
    ёжик"></td>
    <td valign="top">Ёжики защищены от внешней агрессии колючим 
    панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом 
    ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это 
    хищник. Да, он не питается волками и лисами, но только потому, что уступает 
    им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.</td>
   </tr>
  </table>
 </body>
</html>

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   #pic {
    float: left; /* Обтекание картинки текстом */
   }
   #text {
    margin-left: 110px; /* Отступ от левого края */
   }
  </style>
 </head>
 <body> 
  <div>
   <img src="images/igels.png" 
   alt="Вы не поверите, но это ёжик">
  </div>
  <div>
   Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, 
   кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное 
   и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, 
   но только потому, что уступает им в размерах. А вот закусить червячком или даже 
   змеей ему вполне под силу.
  </div>
 </body>
</html>

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

Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.

Как отцентрировать текст в HTML

Отцентрировать текст в HTML можно, используя тег <center> или выравнивание текста по центру CSS.

Использование тегов <center></center>

Один из способов отцентрировать текст – заключить его в теги <center></center>:

<center>Центрировать этот текст!</center>

Вставка этого текста в HTML-код приведет к следующему результату:

Центрировать этот текст!

Примечание: Сегодня тег <center> признан устаревшим. И хотя он все еще работает, ожидается, что он будет удален. Для центрирования текста мы рекомендуем использовать CSS.

Можно отцентрировать текст при помощи CSS задав элементу, который должен быть отцентрирован, свойство text-align.

Если у вас один или несколько текстов по центру блока CSS, которые необходимо отцентрировать, можно сделать это, добавив атрибут style к открывающему тегу элемента и использовав свойство text-align. В примере, приведенном ниже, мы добавили их к тегу <p>:

<p>Центрировать этот текст!</p>

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

Как выровнять текст по центру CSS, если много блоков текста? Вы можете использовать тег <style></style> в секции head (или во внешней таблице стилей), чтобы отцентрировать каждый элемент.

<style>
p {
    text-align:center
}
</style>

Текст будет отцентрирован внутри каждой пары тегов <p></p>. Если необходимо выровнять по центру только несколько параграфов, тогда можно создать класс CSS, как это показано ниже:

<style>
.center {
    text-align: center
}
</style>

Если вы создадите класс center, как показано в предыдущем примере, параграф может быть отцентрирован с помощью приведенного ниже кода, который «вызывает» класс center:

<p>Центрировать этот текст!</p>

Совет: Созданный класс для CSS выравнивания текста по центру блока можно использовать для любого HTML-тега. Например, если вы хотите, чтобы заголовок располагался по центру, добавьте class=»center» в тег <h2>.

Данная публикация представляет собой перевод статьи «HOW TO CENTER TEXT IN HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

Как в html сделать отступ текста?

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

<div style=”margin-left:20px;”> Текст блока HTML </div>

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

<div> Текст блока </div>

CSS:

.text-block { margin-left:20px; }

.text-block {

margin-left:20px;

}

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

margin-left — расстояние слева
margin-right — расстояние справа
margin-top — расстояние сверху
margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

margin: 10px; — делаем отступ текста 10px со всех сторон
margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

<div style=”paddint-top:20px;”> Текст блока </div>

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:

CSS:

.text-block { padding: 20px 10px 15px 20px; }

.text-block {

padding: 20px 10px 15px 20px;

}

Как задать параметры внутреннего отступа

С его помощью так же можно задать разные отступы текста в HTML:

padding-left — слева
padding-right — справа
padding-top — сверху
padding-bottom — расстояние снизу
padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

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

Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько вы можете увеличить расстояние между словами.
Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.

HTML:

<p>Задаём   в HTML</p>

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent

HTML:

<div> Здесь текст HTML блока</div>

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.

Успехов вам в оформлении ваших сайтов и не только!

С уважением Юлия Гусарь

Как разместить изображение на веб-странице слева от текста

Выравнивание изображения по левому краю страницы, в то время как текст обтекает его, является довольно распространенным решением. В веб этот эффект известен как «смещение» изображения. Подобный стиль реализуется с помощью CSS-свойства float left, которое задает обтекание текстом выровненного по левому краю изображения.

Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега <p>). Вот как выглядит HTML-разметка:

<p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
</p>

По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:

<p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
</p>

Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.

Вот CSS-код:

.left {
   float: left;
   padding: 0 20px 20px 0;
}

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

Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса «left«, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин «left» сам по себе ничего не делает.

Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:

<div>
  <p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
  </p>
</div>

Задать стили для изображения можно с помощью следующего кода CSS:

.main-content img {
   float: left;
   padding: 0 20px 20px 0;
}

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

Также можно добавить стили непосредственно в HTML-разметку, например:

<p>
  <img src="images/headshot-picture.jpg" alt="Headshot photo"   />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
  </p>

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Данная публикация представляет собой перевод статьи «How To Float an Image to the Left of Text on a Webpage» , подготовленной дружной командой проекта Интернет-технологии.ру

Как в html сделать текст справа – Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому?

Как сделать текст в HTML (топ 10 запросов)

Как сделать текст в центре

Как сделать текст справа

Как сделать отступ текста

Как сделать текст жирным

Как сделать ссылку в тексте

Как сделать текст в рамке

Как сделать текст подчеркнутым

Как задать тексту фон

Как увеличить текст

Как сделать текст курсивом

Итого

Выравнивание текста по центру, ширине и по краям

text-align | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Изображения в тексте | htmlbook.ru

Рисунок по центру

Обтекание рисунка текстом

Рисунок на поле

Применение таблиц

Использование стилей

Как отцентрировать текст в HTML

Как в html сделать отступ текста?

Навигация по статье:

Отступ текста в HTML при помощи margin

Отступ текста в HTML при помощи padding

Отступ текста html при помощи неразрывного пробела

Отступ текста в HTML при помощи text-indent

Что делать если отступ не появляются?

Как разместить изображение на веб-странице слева от текста

Добавить комментарий Отменить ответ

Рубрики