Как сделать текст и картинку на одном уровне html: html — Как расположить текст на одном уровне с картинкой

html — Организовать картинку с текстом в один ряд. 2 картинки + 2 div

Задать вопрос

Вопрос задан 5 лет 6 месяцев назад

Изменён 5 лет 5 месяцев назад

Просмотрен 2k раза

У меня съезжает текст с картинками. Не могу организовать нормально 4 объекта в один ряд. как мне улучшить мой HTML код?

Когда текста больше, чем картинки, картинки начинают съезжать. Как добиться того, чтобы картинки выравнивались по вертикали, а текст оставался на одном уровне между собою.

ОБНОВЛЕНО:

Нужно добиться того, что как-бы все 4 секции (Картинка-текст-текст-картинка) были одной высоты, НО текст выравнивался бы по вертикали ближе к верху (это я уже сделал), а картинки (т.

Вот мой код:

.services{
    width: 100%;
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
}

.services > div {
    display: table;
    background-color: #f8f8f8;
    padding: 2%;
    float: left;
    width: 46%;
}

.services > div > div {
    width: 50%;
    display: table-cell;
    vertical-align: top;
}

.services > div > img {
    margin: 0 auto;
    width: 90%;
    display: table-cell;
    height: auto;
    border-radius: 5px;
}

.services h2 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.
  white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.red_btn:hover a{
    color: white;
}

.order {
    margin-top: 2%;
    font-size: 1.5vw;
    border-radius: 10px;
    background-color: transparent;
    text-align: center;
    padding: 1%;
    cursor: pointer;
}

.order span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.order span:after{
    content:'\00bb';
    position:absolute;
    opacity:0;
    top:0;
}

.order:hover span{
    padding-right:25px;
}

.  order:hover span:after{
    opacity:1;
    right:0;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div>
  <div>
    <img src="https://i.stack.imgur.com/VCwnv.jpg">
    <div>
      <h2>FOR CLIENTS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
      </p>
      <button><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div>
    <div>
      <h2>FOR PARTNERS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing.
  Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <img src="https://i.stack.imgur.com/SwSBO.jpg">
  </div>
</div>

• html
• css
• адаптивная-верстка

.services{
    width: 100%;
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
    display: table;
}

.services > div {
    display: table-cell;
    background-color: #f8f8f8;
    padding: 2%;
    width: 46%;
    height: 100%;
    vertical-align: middle;
}

.services > div > div {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: top;
}

. services > div > .table-center {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.services > div > .table-center img{
    width: 90%;
    border-radius: 5px;
}

.services h2 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.
  red_btn:hover a{
    color: white;
}

.order {
    margin-top: 2%;
    font-size: 1.5vw;
    border-radius: 10px;
    background-color: transparent;
    text-align: center;
    padding: 1%;
    cursor: pointer;
}

.order span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.order span:after{
    content:'\00bb';
    position:absolute;
    opacity:0;
    top:0;
}

.order:hover span{
    padding-right:25px;
}

.order:hover span:after{
    opacity:1;
    right:0;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div>
  <div>
    <span>
      <img src="https://i.stack.imgur.com/VCwnv.jpg">
    </span>
    <div>
      <h2>FOR CLIENTS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing.
  Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
      </p>
      <button><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div>
    <div>
      <h2>FOR PARTNERS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <span>
      <img src="https://i.  stack.imgur.com/SwSBO.jpg">
    </span>
  </div>
</div>

1. Рекомендую отказаться от id — фронтендщики будут говорить вам, что они нужны только для js, не верьте им, просто ими нужно уметь пользоваться, а в данном случае они просто не нужны

2. Переписать код на классы, тогда отпадет необходимость городить селекторы вида .service > div > div

3. Сейчас картинки центрируются относительно своих родителей, а не всей таблицы, поэтому правильным решением было бы разделить эту таблицу на 4 блока, а не на 2, а потом еще раз на 2

4. Посмотрите также в сторону flexbox

Если использование таблиц не критично, то я бы сделал с flexbox. Надеюсь я правильно понял чего необходимо добиться.

.services__card,
.services {
  display: flex;
}

.services{
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
}

. services > div {
    background-color: #f8f8f8;
    padding: 2%;
}

.services > div > img {
    border-radius: 5px;
    align-self: center;
}

.services h2 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.red_btn:hover a{
    color: white;
}

<link href="https://fonts. googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div>
  <div>
    <img src="https://i.stack.imgur.com/VCwnv.jpg">
    <div>
      <h2>FOR CLIENTS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur nobis consequuntur quas? Autem sunt nam perferendis est, numquam delectus beatae.</p>
      </p>
      <button><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div>
    <div>
      <h2>FOR PARTNERS</h2>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing.  Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <img src="https://i.stack.imgur.com/SwSBO.jpg">
  </div>
</div>

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Разместить иконки на одном уровне с текстом

Вопрос задан 5 лет 4 месяца назад

Изменён 5 лет 4 месяца назад

Просмотрен 5k раз

Привет, посмотрите пожалуйста мой код, и подскажите, как разместить иконки на одном уровне с текстом?

.about__mission__right{
	float: right;
	width: 411px;
	height: 344px;
}

.icon{
	padding-top: 35px;
}

h5{
	padding-left: 12px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #4e8598;
}

.light__text{
	padding-left: 30px;
	display: inline-block;
	font-size: 15px;
	font-weight: lighter;
	color: #b0b2b3;
}

<div>
						<h4>О заслугах</h4>
						<img src="img/bug. png" alt="">
						<h5>Волшебный жук</h5>
						<p>Позволяет быть в тонусе</p>

						<img src="img/bell.png" alt="">
						<h5>Волшебный жук</h5>
						<p>Позволяет быть в тонусе</p>

						<img src="img/storm.png" alt="">
						<h5>Волшебный жук</h5>
						<p>Позволяет быть в тонусе</p>

						<img src="img/camera.png" alt="">
						<h5>Волшебный жук</h5>
						<p>Позволяет быть в тонусе</p>
					</div>

• html
• css

Вариантов много, это один из вариантов

  .icon {
  display: inline-block;
  background: red;
}

.about__mission__right {
  float: right;
  width: 411px;
  height: 344px;
  background: gray;
}

.icon {
  display: inline-block;
  background: red;
}

h5 {
  padding-left: 2px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #4e8598;
}

. light__text {
  padding-left: 30px;
  display: inline-block;
  font-size: 15px;
  font-weight: lighter;
  color: #b0b2b3;
}

<div>
  <h4>О заслугах</h4>
  <img src="img/bug.png" alt="bug.png">
  <h5>Волшебный жук</h5>
  <p>Позволяет быть в тонусе</p>

  <img src="img/bell.png" alt="bell.png">
  <h5>Волшебный жук</h5>
  <p>Позволяет быть в тонусе</p>

  <img src="img/storm.png" alt="storm.png">
  <h5>Волшебный жук</h5>
  <p>Позволяет быть в тонусе</p>

  <img src="img/camera.png" alt="camera.png">
  <h5>Волшебный жук</h5>
  <p>Позволяет быть в тонусе</p>
</div>

Измените на

.icon{
    vertical-align: middle;
}

Зарегистрируйтесь или войдите

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

[HTML] — Как разместить изображение и текст на одной строке в

Узнайте, как отображать и размещать текст и изображение в одной строке на HTML-странице. Включено полезное руководство по размещению изображений CSS рядом друг с другом.

👩‍💻 Технический вопрос

Спросил 4 месяца назад в HTML Элизабет

 
 Как разместить текст и изображение на одной строке веб-страницы? 
 

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

👩‍💻 Технический вопрос

Спросил 7 дней назад в HTML by Thomas

 
 Написать стандартную викторину с использованием HTML, CSS и JavaScript 
 

HTML CSS JavaScript контрольный опрос веб-разработка

👩‍💻 Технический вопрос

Спросил 7 дней назад в HTML от Боитумело

 
 как перейти от списка к горизонтальному 
 

список горизонтальный CSS показать свойство

👩‍💻 Технический вопрос

Спросил 7 дней назад в HTML Наталия

 
 что такое aria-label? 
 

ария-метка доступность программы для чтения с экрана вспомогательные технологии кнопка

👩‍💻 Технический вопрос

Спросил 8 дней назад в HTML Джози

 
 как центрировать изображение 
 

HTML CSS центр изображение

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML by OFFA

 
 Напишите мне код панели пользователя 
 

HTML CSS JavaScript панель управления пользователя макет

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML по ОФФА

 
 Напишите мне страницу предварительного просмотра заказа для веб-сайта еды 
 

еда заказ предварительный просмотр стол кнопка

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML by OFFA

 
 Напишите мне код страницы регистрации 
 

регистрация форма CSS HTML отправить-форма

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML по ОФФА

 
 Напишите мне код страницы входа 
 

HTML CSS JavaScript страница авторизации проверка формы

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML by Sharon

 
 html как сделать центрированный список горизонтальным? 
 

HTML CSS центрированный список горизонтальный список

👩‍💻 Технический вопрос

Спросил 16 дней назад в HTML Шэрон

 
 html как центрировать горизонтальный список? 
 

HTML CSS центр горизонтальный список

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Tameka

 
 Как добавить фото рядом друг с другом 
 

HTML CSS изображений поплавок

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML Тамека

 
 как добавить несколько страниц на целевую страницу 
 

HTML целевая страница несколько страниц навигация КСС

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML Диана

 
 как убрать пробелы между строками в html? 
 

HTML CSS межстрочный интервал допуск прокладка

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 17 дней назад в HTML by Наталия

 
 интервал между элементами html 
 

HTML CSS допуск набивка интервал

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Olena

 
 как сделать градиентный фон в HTML? 
 

HTML CSS градиент фон

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Olena

 
 как сделать линию с цветом, то бишь hr? 
 

HTML CSS линия час цвет

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Furá

 
 У меня есть html-файл, который нельзя изменить, и мне нужно настроить его стиль и вставить содержимое в новый html-файл 
 

HTML CSS JavaScript настройка ДОМ

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Furá

 
 Как вставить в html-файл таблицу из другого html-файла и использовать тот же лист style. css 
 

HTML стол стиль.css тег объекта

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML от Фура

 
 Могу ли я применить лист css моего html-файла к html-объекту? 
 

HTML CSS сорт ИДЕНТИФИКАТОР стиль элемент

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Kodili

 
 как кодировать смайлик солнце за облаком 
 

HTML код Юникод эмодзи солнце облако

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Burhan

 
 добавить логотип заголовка 
 

HTML CSS заголовок логотип сайт

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Burhan

 
 как получить логотип заголовка 
 

HTML логотип заголовок тег изображения

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Isa

 
 как добавить html изображение с компьютера скачать 
 

HTML изображение компьютер путь

👩‍💻 Технический вопрос

Спросил 17 дней назад в HTML by Luyanda

 
 Как сделать изображение фоном для вашего веб-сайта с помощью языка html и CSS 
 

HTML CSS изображение на заднем плане Веб-сайт дизайн

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML by Shukura

 
 как добавить картинку в html 
 

HTML изображение img-тег атрибут источника альт атрибут

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML от Raquel

 
 как добавить ссылку в мой код 
 

HTML связь ссылка

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML от Raquel

 
 как добавить абзац в мой код 
 

HTML параграф код

👩‍💻 Технический вопрос

Спросил 18 дней назад в HTML от Raquel

 
 расскажите мне больше о сильном элементе 
 

HTML ярлык сильный жирный шрифт важность

👩‍💻 Технический вопрос

Спросил 19 дней назад в HTML by Nikita

 
 как сделать кнопку с кнопкой ввода 
 

представлять на рассмотрение форма

👩‍💻 Технический вопрос

Спросил 19 дней назад в HTML от Эллешевой

 
 загрузить видео на сайт в формате html, указав постер и ширину 
 

HTML тег видео плакат ширина веб-разработка

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 19 дней назад в HTML by Mark

 
 Дан массив с элементами разных типов.  Создайте функцию, которая вычисляет среднее арифметическое только числовых элементов данного массива с помощью html. 
 

HTML Множество среднее арифметическое функция

👩‍💻 Технический вопрос

Спросил 19 дней назад в HTML Ольга

 
 что такое атрибуты в HTML? 
 

HTML атрибуты элемент открывающий тег ID

👩‍💻 Технический вопрос

Спросил 20 дней назад в HTML от Apirinya

 
 можете ли вы объяснить 
? 
 

HTML тег div контейнер группировка

👩‍💻 Технический вопрос

Спросил 20 дней назад в HTML по Fk

 
 я хочу добавить список в свой заголовок 
 

HTML CSS заголовок список панель навигации

👩‍💻 Технический вопрос

Спросил 22 дня назад в HTML by Shelah

 
 что такое 
 
 

HTML ярлык Разрыв строки веб-страница браузер

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Confidence

 
 поиск города в html 
 

HTML форма поиск город ввод

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML от Tejaswini

 
 код jsp для выбора песни и прослушивания 
 

jsp аудиоплеер выбор песни падать кнопка

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML от Tejaswini

 
 JSP-код для работы всего веб-сайта 
 

jsp Веб-сайт шаблон включить

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Tejaswini

 
 Код JSP для разработки музыкального бэкенда 
 

jsp mysql база данных музыка серверная часть

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Daniel

 
 изменить размер текста внутри тега 
 
 

HTML CSS размер шрифта размер текста

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML by Kateryna

 
 чем div отличается от раздела 
 

div раздел семантический группировка содержание

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Рикке В.

 
 где использовать ? 
 

анкерная бирка гиперссылка использование тега

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML by Chairene

 
 в чем разница между классом и ID 
 

HTML CSS сорт ИДЕНТИФИКАТОР стиль

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML от Amrita

 
 можете ли вы поместить  в диапазон? 
 

HTML охватывать а гиперссылка встроенный элемент

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML от Amrita

 
 можете ли вы поместить  в div? 
 

HTML див тег гиперссылка

👩‍💻 Технический вопрос

Спросил 28 дней назад в HTML Ирина

 
 привет! как сделать гиперссылку на электронную почту 
 

HTML электронная почта гиперссылка

👩‍💻 Технический вопрос

Спросил 28 дней назад в HTML by Daryl

 
 td img изменить размер 
 

HTML img-тег размер ширина высота CSS

👩‍💻 Технический вопрос

Спросил 29 дней назад в HTML Илария

 
 что означает дом? 
 

ДОМ Объектная модель документа веб-документы интерфейс программирования

👩‍💻 Технический вопрос

Спросил 30 дней назад в HTML Элизабет

 
 Что такое тег hr? 
 

HTML часовая метка горизонтальное правило веб-разработка

👩‍💻 Технический вопрос

Спросил 30 дней назад в HTML Элизабет

 
 Что такое тег em? 
 

тег em HTML-тег выделить текст курсив Документация MDN

Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node. js Рубин Идти .NET

html — CSS выравнивает изображения и текст на одной строке

спросил 10 лет, 6 месяцев назад

Изменено 1 год, 3 месяца назад

Просмотрено 342 тысячи раз

Я искал и пробовал разные методы уже несколько часов. Я просто не могу вместить эти два изображения и текст в одну строку. Я хочу, чтобы и изображения, и оба текста располагались в одной строке. Изображение, текст, изображение, текст.0003

  
$likes
 
  
$dislikes
 
 

Мой класс «liketext» содержит простой модификатор цвета текста. В этом коде первое изображение и текст находятся на одной строке, а следующее изображение и текст — на строке ниже. Я хочу, чтобы все четыре объекта находились на одной линии. Я действительно пытался решить этот вопрос самостоятельно и ценю любую оказанную помощь, и, надеюсь, этот пост может помочь и другим, спасибо!

• html
• css
• стили
• выравнивание
• изображение

 display: inline-block;
 

 float: left;
 

 clear: left;
 

 

    
Текст слева
    
Правильный текст
    <дел/>
 

 div {
     выравнивание текста: по центру;
}
 

 изображения {
     вертикальное выравнивание: посередине;
}
охватывать {
     вертикальное выравнивание: посередине;
}
 

 ч5 {
    дисплей: встроенный блок
}
 

 <дел>
  
  Сделать фото