Выравнивание текста и картинки в
HTML
короткий текст 
текст 
а это очень длинный текст CSS
.main-list list-style:none; margin: 0 0 0 200px;
>
.main-list li display:block; float:left; font-size:24px; font-family:quicksand; background-color: rgba(230, 196, 17, 0.72); color:#000; margin:20px 0 0 0; padding: 10px 10px; width:600px; text-align: center;
>
.main-list li img vertical-align: middle;
>
10 сообщений
# 10 лет назад
Цитата («FLAKE_MDM»):
.main-list li img
После этого нарушилось вертикальное выравнивание текста
6863 сообщения
# 10 лет назад
kekzzzik, будьте добры почитать htmlbook.ru и поискать ответ на свои вопросы в гугле, прежде, чем донимать подобными вопросами. В простонародье то, чего вы добиваетесь, называется «разжевать и в рот положить». не стыдно?
10 сообщений
# 10 лет назад
floppox, читал и искал, если бы нашел не спрашивал.
6863 сообщения
# 10 лет назад
kekzzzik, а попробуйте почитать систематично. Изучить базовые свойства, их действие и побочные эффекты. Хотя бы, если вам посоветовали использовать float, то потрудитесь прочитать о нем, прежде, чем задавать новый вопрос.
10 сообщений
# 10 лет назад
floppox, пытаюсь и читаю. Просто я только начинаю изучать html/css — сразу много новой информации тяжело усвоить. Начал читать про float там понятие потока документа, одно за другое цепляется. Например, position:absolute выбивает элемента из потока. Если даже не знаешь о существовании чего-то то, о чем читать? Мне не понятна разница float и display: block/inline-block/table-cell и т.д. Видимо со временем уложится в голове
6863 сообщения
# 10 лет назад
kekzzzik, у меня встречный вопрос. Если даже не знаешь о существовании чего-то (в данном случае основных свойств цсс), то зачем пытаться что-то сделать чужим умом?
Я дала вам ссылку на прекрасный сайт. Видите, там колонку слева? Вот пока все, что в ней есть, не пойдете хотя бы бегло, вы будете выглядеть идиотом, задавая такие вопросы в таких местах.
Ну, скажу я вам сейчас, что вам следует к тегу li применить свойство overflow:hidden. А что это вам даст? Да, сиюминутную задачу решите, а дальше придете с новыми вопросами, при чем, в аналогичной же ситуации?
Если информация из справочников вам не поддается, то ищите преподавателя. Благо, вариантов масса — от поступления в вуз, до репетиторства по скайпу.
Выравнивание в CSS
За выравнивание отвечает text-align .
Создадим два файла page.html и style.css.
page.html:
style.css:
#one <
width: 300px;
background: yellow;
text-align: center;
>
#two <
width: 300px;
background: yellow;
text-align: left;
margin-top: 20px;
>
#three <
width: 300px;
background: yellow;
text-align: right;
margin-top: 20px;
>
#four <
width: 300px;
background: yellow;
text-align: justify;
margin-top: 20px;
>
В браузере выравнивание будет выглядеть так:
- Лендинг пейдж
- SEO оптимизация сайта в Алматы
- Веб студия в Алматы. Студия веб дизайна в Казахстане
- Заказать доску объявлений
- Интернет реклама в Алматы
- Как открыть интернет магазин
- Как привлечь клиентов
- Сайт каталог в Алматы
- Система оплаты на сайте
- Продвижение сайта в Алматы с гарантией!
- Создание интернет магазина
- Сайт визитка в Алматы
- Поддержка сайта
- Интернеттегі жарнама
- Фирменный стиль компании
- Создание флаера
- Создание логотипа в Алматы
- Рерайтинг в Алматы
- Копирайтинг в Алматы
- Открыть магазин одежды
- Интернет магазин под ключ
- Интернет эквайринг
- Веб блог компании
- Как раскрутить сайт
- Разработка стартапа под ключ. Купить стартап или как создать стартап
- Интернет эквайринг Сбербанка или система оплаты Сбербанка
- Подключить систему оплаты на сайте в Казахстане. Интернет эквайринг
- Что такое интернет магазин
- Заказать корпоративный сайт в Алматы под ключ
- Тендер деген не? Тендерге қатысу, тендермен айналысу
- Интернет маркетинг деген не? SMM маркетинг деген не?
- Программист деген кім? Программист мамандығы
- Python тілі. Python деген не? Python жайлы қазақша сабақтар
- Стартап деген не? Стартап түрлері және стартап кезеңдері
- Лендинг деген не? Landing Page деген не?
- Веб сайт деген не? Браузер деген не? Сайт конструкторы деген не?
- Домен деген не? Хостинг деген не?
- Web сервер деген не? DNS сервер деген не?
- Что такое плагиат? Что считается плагиатом?
- Плагиат деген не?
- Что такое дропшиппинг? Дропшиппинг поставщики. Дропшиппинг в Казахстане
- Создание сайта с нуля в HTML. Создать сайт на WordPress
- Интернет маркетолог деген не? Маркетолог деген кім?
- Ссылки на сайте
- Вставка ссылок
- Обрезание картинок
- Создание визитки в Алматы
- Контекстная реклама в Гугл
- Реклама услуг в интернете
- Продажа товаров в интернете
- Презентация фирмы
- Карточка товара Wildberries
- Что такое микросайт?
Как выравнивать картинку по центру/правому краю/левому краю?
Картинку как и текст — text-align: center на контейнер в CSS.
11th Mar 2017, 8:51 PM
float для лево/право можешь попробовать
11th Mar 2017, 10:02 PM
Often have questions like this?
Learn more efficiently, for free:
Introduction to Python 7.1M learners
Introduction to Java 4.7M learners
Introduction to C 1.5M learners
Introduction to HTML 7.5M learners
Выравнивание картинок относительно друг друга и окна браузера
Здравствуйте! Мне надо выровнять картинки (в моем случае 3 фотографии) относительно друг друга и относительно окна браузера, например, 1 картинка-по левому краю, 2-по центру, 3-по правому краю (см. вложение). Пишу такой код:
в html
в css:
#a display:block;
text-align:left;
float:left;
>
#b display: block;
margin:0 50 0 50;
text-align:center;
>
#c display:block;
text-align:right;
>
figcaption font-style:italic;
color:#717279;
>
Совсем не получается. Подскажите, пожалуйста, как это сделать для трех картинок и в случае, если картинок больше трех. Спасибо.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Строки наезжают друг на друга при уменьшении окна браузера
При сокращении ширина браузера текст наезжает друг на друга. Я знаю про адаптивную вёрстку, но 800+.
При сужении окна браузера блоки уходят друг под друга
Блоки уходят друг под друга как это исправить? <!DOCTYPE html> <html lang="en"> <head> .
При уменьшении окна браузера блоки «наезжают друг на друга»
Подскажите пожалуйста, как решить данную проблему: при уменьшении окна браузера блоки "наезжают.
Фиксация элементов относительно друг друга
Как зафиксировать элемент относительно другого элемента (например кнопку относительно textbox), что.
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
1 2 3 4 5
div class="wrap"> img src="http://placekitten.com/100"> img src="http://placekitten.com/100"> img src="http://placekitten.com/100"> /div>
1 2 3 4 5 6 7
*{ margin: 0; } .wrap{ display: flex; justify-content: space-between; }
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
1 2 3 4 5 6 7 8 9 10 11 12 13 14
div class="container"> figure class="a"> img src="http://placeimg.com/300/450/arch"> figcaption>Architecture/figcaption> /figure> figure class="b"> img src="http://placeimg.com/300/450/people"> figcaption>People/figcaption> /figure> figure class="c"> img src="http://placeimg.com/300/450/tech"> figcaption>Tech/figcaption> /figure> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
* { box-sizing: border-box; } /* 360 */ .container { max-width: 980px; margin: 1rem auto; padding: 1rem; border: 1px solid #717279; border-radius: 25px; text-align: center; } .container:after{ display: block; clear: both; content: ""; } figure{ margin: 0; width: 30%; } img{ display: block; width: 100%; } .a { float: left; } .b { display: inline-block; } .c { float: right; } figcaption { margin-top: 1rem; font-style: italic; color: #717279; }
87844 / 49110 / 22898