Блог

Главная - Вопросы по программированию - Как выровнять текст с изображением в html/css

Как выровнять текст с изображением в html/css

#html #css

Вопрос:

У меня есть изображение и немного текста. В настоящее время у меня есть центр текста и изображений, однако я хочу, чтобы класс содержимого находился в правой части изображения (выровнен по вертикали). Я пробовал выровнять по вертикали, но это, похоже, не слишком работает. Кто-нибудь может мне помочь, пожалуйста?

где я хочу, чтобы текст был

https://jsfiddle.net/skriker11/3t7asmhf/1/

 .card{
  border: solid red;
  text-align: center;
}

img{
  border: 1px solid red;
  margin: auto;
  vertical-align: middle;
}

.card > .content h3, p {
  margin: 0;
} 

.content {
  display: flex;
  flex-direction: column;
} 
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <div class="card">

      <h1>Title of widget</h1>

      <div class='content'>
        <img src="https://placeimg.com/640/480/tech" width='100' height=100/>
        <p>Sydney</p>
        <h3>26</h3>
        <p><strong>Wind</strong></p> <p>NE 24km/h</p>
      </div>

    </div>

  </body>
</html>

Комментарии:

1. Как насчет того, чтобы обернуть все остальные элементы, кроме img, в div.содержимое с помощью div? Затем гибкое направление div.content должно быть строкой, в то время как новое гибкое направление div должно быть столбцом.

2. может быть, это ответит на ваш вопрос w3schools

Ответ №1:

Вот что вы могли бы сделать, обратите внимание на комментарии с FIX :

 .card{
  border: solid red;
  
  /* FIX: make the card as flexbox with direction of column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

img{
  border: 1px solid red;
  vertical-align: middle;
}

.card > .content h3, p {
  margin: 0;
}

.content {
  /* FIX#2: flexbox with direction of row */
  display: flex;
  align-items: center;
} 
 <div class="card">
  <h1>Title of widget</h1>
  
  <div class='content'>
    <img src="https://placeimg.com/640/480/tech" width='100' height=100/>

    <!-- FIX: wrap all texts in a div -->
    <div class="description">
      <p>Sydney</p>
      <h3>26</h3>
      <p><strong>Wind</strong></p> <p>NE 24km/h</p>
    </div>
  </div>

</div>

Комментарии:

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

2. @tjStack Я только что обновил ответ, это то, чего ты хочешь?

3. Удивительные. Спасибо.

Метки: