Зараз ми з вами навчимося вирівнювати текст.
Для цього використовується властивість text-align.
Текст можна вирівняти по лівому краю (значення
left), праворуч (значення right),
по центру (значення center) і одночасно
і з правого, і з лівого краю (значення
justify).
Давайте подивимося на прикладах.
Значення right
Вирівняємо текст в абзацах з правого краю:
<p>
абзац з текстом
</p>
p {
text-align: right;
}
:
Значення center
А тепер вирівняємо по центру:
<p>
абзац з текстом
</p>
p {
text-align: center;
}
:
Значення left
А ось значення left для абзаців можна
і не ставити - вони за замовчанням і так вирівняні
по лівому краю. Однак є елементи, які
за замовчуванням стоять по центру (це, наприклад,
теги th, які роблять комірку-заголовок
таблиці). І ось для них якраз і може
необхідно вирівнювання по лівій стороні.
Зробимо це:
<table border="1">
<tr>
<th>Ім'я</th>
<th>Прізвище</th>
<th>Зарплата</th>
</tr>
<tr>
<td>Іван</td>
<td>Іваненко</td>
<td>200$</td>
</tr>
<tr>
<td>Микола</td>
<td>Миколенко</td>
<td>300$</td>
</tr>
</table>
th {
text-align: left;
}
table {
width: 400px;
}
:
Значення justify
Ну, і нарешті вирівняємо текст одночасно і з правого, і з лівого краю. Цей ефект можна побачити лише за наявності достатньо довгого тексту:
<p>
довгий текст...
</p>
p {
text-align: justify;
width: 300px;
}
:
Практика
Скопіюйте собі наступний HTML-код і вирішіть для нього наведені нижче завдання:
<h1>Головний заголовок сторінки</h1>
<table border="1">
<tr>
<th>Продукт</th>
<th>Ціна</th>
<th>Кількість</th>
</tr>
<tr>
<td>Яблоки</td>
<td>100</td>
<td>5кг</td>
</tr>
<tr>
<td>Апельсини</td>
<td>200</td>
<td>6кг</td>
</tr>
<tr>
<td>Банани</td>
<td>300</td>
<td>7кг</td>
</tr>
</table>
<h2>Вторинний заголовок 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Вторинний заголовок 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<h2>Вторинний заголовок 3</h2>
<table border="1">
<tr>
<td>комірка 1</td>
<td>комірка 2</td>
<td>комірка 3</td>
</tr>
<tr>
<td>комірка 4</td>
<td>комірка 5</td>
<td>комірка 6</td>
</tr>
<tr>
<td>комірка 7</td>
<td>комірка 8</td>
<td>комірка 9</td>
</tr>
</table>
Поставте всі заголовки h1 по правому краю.
Поставте всі заголовки h2 по центру.
Встановіть всім таблицям ширину в 500px.
Поставте текст в комірках th по лівому краю.
Поставте текст в комірках td по центру.
Встановіть всім абзацам ширину в 300px.
Вирівняйте текст усіх абзаців одночасно з правого та з лівого краю.
Встановіть заголовкам h2 ширину в
300px. Поставте їх у центрі. Зверніть
увагу на те, що центрування відбуватиметься
всередині цих 300px.