Как выровнить элементы?
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <title>Iphone 14 pro</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <nav class="nav"> <ul class="menu"> <li class="menu-item"> <a class="menu-link" href="#">Что нового</a> </li> <li class="menu-item"> <a class="menu-link" href="#">Цвет</a> </li> <li class="menu-item"> <a class="menu-link" href="#">Заказать</a> </li> </ul> <a class="logo"> <img class="logo-img" src="images/logo.png" alt="логотип"> </a> <a class="phone" href="tel:380504565656">+38 050-456-56-56</a> </nav> </div> </header> <main class="main"> <section class="headline"> <div class="coineiner"> <h1 class="title">IPHONE 14 PRO</h1> <img class="headline-img" src="images/iphone_14_pro.png" alt="IPHONE 14 PRO"> <a class="headline-btn" href="#">ВЫБРАТЬ</a> </div> </section> <section class="new"> <div class="container"> <h2 class="new-title">ЧТО НОВОГО</h2> <div class="new-info"> <div class="new-text"> <p>Все модели оснащены однокристальной системой A16 Bionic, 48-мегапиксельной основной камерой и экранами ProMotion с защитой Ceramic Shield и частотным диапазоном 1 — 120 Гц, а также ускоренной памятью LPDDR5. Дизайн линейки обновлен, на фронтальной панели смартфонов два выреза. </p> <p>Все iPhone 14 в США будут продаваться без лотка для SIM-карт: производитель заявляет, что улучшенная технология eSIM позволит перенести старые электронные сим-карты на новые смартфоны.</p> <p>Обновлены фронтальная камера (она снабжена автофокусом и быстрее распознает пользователя в условиях недостаточной освещенности) и сенсор основной камеры. </p> <b>iPhone 14 Pro вышел в новом дизайне — без фирменной «челки». Также в ассортименте появился новый цвет. В смартфоне, в отличие от «обычных» 14-х айфонов, установлен процессор A16 Bionic, который может за секунду производить 4 трлн операций с фото.</b> </div> <img class="images-new" src="images/Apple-iPhone-14-Pro-Max%201.jpg" alt="iphone"> </div> </div> </section> <section class="color"> <div class="container"> <h2 class="color-title">ВЫБЕРИ СВОЙ ЦВЕТ</h2> <ul class="color-list"> <li class="color-item"> <img src="images/color-1.jpg" alt=""> <h3>Silver</h3> <p>Серебристый</p> </li> <li class="color-item"> <img src="images/color-2.jpg" alt=""> <h3>Deep purple</h3> <p>Темно фиолетовый</p> </li> <li class="color-item"> <img src="images/color-3.jpg" alt=""> <h3>Gold</h3> <p>Золотой</p> </li> <li class="color-item"> <img src="images/color-4.jpg" alt=""> <h3>Space Black</h3> <p>Космический черный</p> </li> </ul> </div> </section> <section> <section class="contacts"> <div class="contacts-inner"> <form class="contacts-form" action="#"> <h2 class="contacts-title">ХОЧЕШЬ IPHONE 14 PRO?</h2> <input class="contacts-input" type="text" placeholder="Ваше имя"> <input class="contacts-input" type="tel" placeholder="Номер телефона"> <p>В ближайшее время наш менеджер свяжется с Вами</p> <button type="submit">ЗАКАЗАТЬ</button> </form> <img src="images/contact.jpg" alt="iphone"> </div> </section> </section> </main> <footer class="footer"> <div class="container"> <div class="footer-inner"> </div> <a class="footer-link" href="#">Политика конфиденциальности</a> <a class="logo"> <img class="logo-img" src="images/logo.png" alt="логотип"> </a> <a class="phone" href="tel:380504565656">+38 050-456-56-56</a> </div> </footer> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> <title>Iphone 14 pro</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <nav class="nav"> <ul class="menu"> <li class="menu-item"> <a class="menu-link" href="#">Что нового</a> </li> <li class="menu-item"> <a class="menu-link" href="#">Цвет</a> </li> <li class="menu-item"> <a class="menu-link" href="#">Заказать</a> </li> </ul> <a class="logo"> <img class="logo-img" src="images/logo.png" alt="логотип"> </a> <a class="phone" href="tel:380504565656">+38 050-456-56-56</a> </nav> </div> </header> <main class="main"> <section class="headline"> <div class="coineiner"> <h1 class="title">IPHONE 14 PRO</h1> <img class="headline-img" src="images/iphone_14_pro.png" alt="IPHONE 14 PRO"> <a class="headline-btn" href="#">ВЫБРАТЬ</a> </div> </section> <section class="new"> <div class="container"> <h2 class="new-title">ЧТО НОВОГО</h2> <div class="new-info"> <div class="new-text"> <p>Все модели оснащены однокристальной системой A16 Bionic, 48-мегапиксельной основной камерой и экранами ProMotion с защитой Ceramic Shield и частотным диапазоном 1 — 120 Гц, а также ускоренной памятью LPDDR5. Дизайн линейки обновлен, на фронтальной панели смартфонов два выреза. </p> <p>Все iPhone 14 в США будут продаваться без лотка для SIM-карт: производитель заявляет, что улучшенная технология eSIM позволит перенести старые электронные сим-карты на новые смартфоны.</p> <p>Обновлены фронтальная камера (она снабжена автофокусом и быстрее распознает пользователя в условиях недостаточной освещенности) и сенсор основной камеры. </p> <b>iPhone 14 Pro вышел в новом дизайне — без фирменной «челки». Также в ассортименте появился новый цвет. В смартфоне, в отличие от «обычных» 14-х айфонов, установлен процессор A16 Bionic, который может за секунду производить 4 трлн операций с фото.</b> </div> <img class="images-new" src="images/Apple-iPhone-14-Pro-Max%201.jpg" alt="iphone"> </div> </div> </section> <section class="color"> <div class="container"> <h2 class="color-title">ВЫБЕРИ СВОЙ ЦВЕТ</h2> <ul class="color-list"> <li class="color-item"> <img src="images/color-1.jpg" alt=""> <h3>Silver</h3> <p>Серебристый</p> </li> <li class="color-item"> <img src="images/color-2.jpg" alt=""> <h3>Deep purple</h3> <p>Темно фиолетовый</p> </li> <li class="color-item"> <img src="images/color-3.jpg" alt=""> <h3>Gold</h3> <p>Золотой</p> </li> <li class="color-item"> <img src="images/color-4.jpg" alt=""> <h3>Space Black</h3> <p>Космический черный</p> </li> </ul> </div> </section> <section> <section class="contacts"> <div class="contacts-inner"> <form class="contacts-form" action="#"> <h2 class="contacts-title">ХОЧЕШЬ IPHONE 14 PRO?</h2> <input class="contacts-input" type="text" placeholder="Ваше имя"> <input class="contacts-input" type="tel" placeholder="Номер телефона"> <p>В ближайшее время наш менеджер свяжется с Вами</p> <button type="submit">ЗАКАЗАТЬ</button> </form> <img src="images/contact.jpg" alt="iphone"> </div> </section> </section> </main> <footer class="footer"> <div class="container"> <div class="footer-inner"> </div> <a class="footer-link" href="#">Политика конфиденциальности</a> <a class="logo"> <img class="logo-img" src="images/logo.png" alt="логотип"> </a> <a class="phone" href="tel:380504565656">+38 050-456-56-56</a> </div> </footer> </body> </html>
CSS
a{ text-decoration: none; color: #717171; } ul { margin: 0; padding: 0; list-style: none; } body { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 18px; font-weight: 400; color: #0a0a0a; } .header { background-color: #0a0a0a; padding: 33px 0 32px; font-size: 24px; line-height: 29px; color: #717171; } .container { width: 1200px; margin: 0 auto; padding: 0 15px; } .nav { display: flex; justify-content: space-between; align-items: center; } .menu { display: flex; flex-grow: 1; flex-basis: 0; } .phone { flex-grow: 1; flex-basis: 0; text-align: right; font-size: 24px; line-height: 29px; } .menu-item { padding-right: 30px; } .headline { background-color: #f5f5f7; text-align: center; padding: 70px 0 40px; } .title { text-transform: uppercase; margin: 0 0 40px; color: #490E84; font-weight: 700; font-size: 64px; line-height: 77px; } .headline-img { margin: 0 0 25; display: block; margin: 0 auto; } .headline-btn { display: inline-flex; font-weight: 700; font-size: 24px; line-height: 29px; text-transform: uppercase; color: #FFF; background-color: #490E84; padding: 22px 117px 19px; border-radius: 30px; margin: 36px 0 36px 0; } .new { padding: 90px 0 150px; } .new-title, .color-title { margin: 0 0 50px; text-transform: uppercase; text-align: center; color: #717171; font-size: 32px; line-height: 39px; font-weight: 700; } .new-info { display: flex; align-items: center; } .new-text p { max-width: 560px; margin: 0 0 30px } .new-text b { max-width: 560px; font-size: 20px; line-height: 26px; display: block; } .images-new { margin-left: 190px; } .color-list { display: flex; justify-content: space-between; text-align: center; } .color-item img { margin-bottom: 20px; } .color-item h3 { font-size: 20px; line-height: 26px; margin: 0 0 10px; } .color-item p { margin: 0; } .contacts-inner { margin: 159px; display: flex; background-color: #574B63; color: #fff; } .contacts-form { width: 100%; padding: 140px 93px; text-align: center; } .contacts-title { margin: 0 0 60px; text-transform: uppercase; font-size: 32px; line-height: 39px; } .contacts-input { padding: 10px 0; border: none; border-bottom: 1px solid #fff; display: block; width: 100%; margin-bottom: 20px; background-color: #574B63; } .contacts-input::placeholder { font-size: 14px; line-height: 18px; color: #fff; opacity: .5; font-family: 'Inter', sans-serif; font-weight: 400; } .contacts-form p { opacity: 0.5; text-align: center; margin: 30px 0; } .contacts-form button { border: none; text-transform: uppercase; color: #490E84; background-color: #fff; border-radius: 30px; padding: 16px 81px; font-weight: 400; cursor: pointer; } .footer { background-color: #0A0A0A; } .footer-link { flex-grow: 1; flex-basis: 0; } #container { display: flex; } .footer-inner { color: #717171; align-items: center; justify-content: space-between; padding: 50px 0; } |
a{ text-decoration: none; color: #717171; } ul { margin: 0; padding: 0; list-style: none; } body { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 18px; font-weight: 400; color: #0a0a0a; } .header { background-color: #0a0a0a; padding: 33px 0 32px; font-size: 24px; line-height: 29px; color: #717171; } .container { width: 1200px; margin: 0 auto; padding: 0 15px; } .nav { display: flex; justify-content: space-between; align-items: center; } .menu { display: flex; flex-grow: 1; flex-basis: 0; } .phone { flex-grow: 1; flex-basis: 0; text-align: right; font-size: 24px; line-height: 29px; } .menu-item { padding-right: 30px; } .headline { background-color: #f5f5f7; text-align: center; padding: 70px 0 40px; } .title { text-transform: uppercase; margin: 0 0 40px; color: #490E84; font-weight: 700; font-size: 64px; line-height: 77px; } .headline-img { margin: 0 0 25; display: block; margin: 0 auto; } .headline-btn { display: inline-flex; font-weight: 700; font-size: 24px; line-height: 29px; text-transform: uppercase; color: #FFF; background-color: #490E84; padding: 22px 117px 19px; border-radius: 30px; margin: 36px 0 36px 0; } .new { padding: 90px 0 150px; } .new-title, .color-title { margin: 0 0 50px; text-transform: uppercase; text-align: center; color: #717171; font-size: 32px; line-height: 39px; font-weight: 700; } .new-info { display: flex; align-items: center; } .new-text p { max-width: 560px; margin: 0 0 30px } .new-text b { max-width: 560px; font-size: 20px; line-height: 26px; display: block; } .images-new { margin-left: 190px; } .color-list { display: flex; justify-content: space-between; text-align: center; } .color-item img { margin-bottom: 20px; } .color-item h3 { font-size: 20px; line-height: 26px; margin: 0 0 10px; } .color-item p { margin: 0; } .contacts-inner { margin: 159px; display: flex; background-color: #574B63; color: #fff; } .contacts-form { width: 100%; padding: 140px 93px; text-align: center; } .contacts-title { margin: 0 0 60px; text-transform: uppercase; font-size: 32px; line-height: 39px; } .contacts-input { padding: 10px 0; border: none; border-bottom: 1px solid #fff; display: block; width: 100%; margin-bottom: 20px; background-color: #574B63; } .contacts-input::placeholder { font-size: 14px; line-height: 18px; color: #fff; opacity: .5; font-family: 'Inter', sans-serif; font-weight: 400; } .contacts-form p { opacity: 0.5; text-align: center; margin: 30px 0; } .contacts-form button { border: none; text-transform: uppercase; color: #490E84; background-color: #fff; border-radius: 30px; padding: 16px 81px; font-weight: 400; cursor: pointer; } .footer { background-color: #0A0A0A; } .footer-link { flex-grow: 1; flex-basis: 0; } #container { display: flex; } .footer-inner { color: #717171; align-items: center; justify-content: space-between; padding: 50px 0; }
Дополнительно:
Поправьте, пожалуйста, описание вопроса
3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег code или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для выравнивания элементов на веб-странице можно использовать различные методы в зависимости от типа элементов, которые необходимо выровнять. Вот несколько способов выравнивания элементов:
1. Выравнивание текста по центру:
Для выравнивания текста по центру можно использовать CSS свойство text-align. Например, чтобы выровнять текст по центру в блоке div, можно использовать следующий CSS код:
div { text-align: center; }
2. Выравнивание блока по центру:
Чтобы выровнять блок по центру горизонтали, можно использовать свойство margin со значением auto для левого и правого отступов. Например:
div { width: 50%; margin: 0 auto; }
3. Выравнивание элементов внутри блока:
Для выравнивания элементов внутри блока можно использовать свойство display со значением flex и свойство align-items. Например, чтобы выровнять элементы по центру внутри блока div, можно использовать следующий CSS код:
div { display: flex; align-items: center; }
4. Выравнивание элементов по вертикали:
Для выравнивания элементов по вертикали можно использовать свойство display со значением flex и свойство justify-content. Например, чтобы выровнять элементы по центру по вертикали в блоке div, можно использовать следующий CSS код:
div { display: flex; justify-content: center; }
Это лишь небольшой набор способов выравнивания элементов на веб-странице. В зависимости от конкретной ситуации и требований дизайна могут использоваться и другие методы выравнивания. Надеюсь, что эти примеры помогут вам решить вашу проблему с выравниванием элементов на странице!