Как я могу центрировать изображение и текст в середине div?

Question

<div class="curbaT">
        <img src="avertizare/1.png" class="img" >
        <p class="p1">Curba la stanga - Este amplasat la cel mult 200 m de o curba la stanga. Conducatorul trebuie sa circule cu viteza redusa in curbe, iar daca vizibilitatea este redusa, toate manevrele (depasirea, oprirea, stationarea, mersul inapoi, intoarcerea) sunt interzise.</p>
   </div>

У меня есть это, и я хочу, чтобы изображение было отцентрировано по вертикали, выровнено по левому краю, а текст - по центру по вертикали, но справа от изображения.

Я прикрепил изображение ... и попробовал это:

.img{

   left: 50;
   height: 100px;
   width: 120px;
   margin-top: auto;
   margin-bottom: auto;
}

.p1{
    position: absolute;
    right: 120px;
    font-size: 20px;
}

Answer 1

Вы можете использовать это css с существующим HTML для достижения этого:

.curbaT {
  display: flex;
  align-items: center;
}

.img{
   margin-left: 50;
   height: 100px;
   width: 120px;
   margin-top: auto;
   margin-bottom: auto;
}

.p1{
    margin-right: 120px;
    font-size: 20px;
}

display:flex и align-items центрируют содержимое по вертикали в строке. Вы не хотите использовать абсолютное позиционирование во внутренних элементах, потому что тогда они теряют связь друг с другом, поэтому вместо этого используйте поля, как указано выше.

Answer 2

Для меньшего и простого кода мы можем использовать функцию flexbox . Но IE <версия-11 не поддерживает <strong>flexbox . Для получения подробной информации, перейдите по этой ссылке -> Поддержка Flexbox. .

Чтобы ответить, пожалуйста, используйте ниже CSS для достижения желаемого результата с вашим собственным HTML.

/* Basic properties needed */
.curbaT {
  display: flex; /*This is required*/
  align-items: center; /*This is required*/
  justify-content: center;  /*this is optional*/
  flex-direction : row;/*default value - optional*/
}
/*For beautification, please check the below snippet*/

* ,*:before,*:afer {
  box-sizing: border-box;
}
.curbaT {
  display: flex; /*This is required*/
  align-items: center; /*This is required*/
  justify-content: center; 
  flex-direction : row;/*default value*/
  border: 1px solid #888; /*this can be changed*/
  height: 130px; /*this can be changed*/
  padding-left: 30px; /*this is optional*/
  padding-right: 30px; /*this is optional*/
}
.curbaT img { 
  margin-right: 20px; /*this can be changed*/
}

<div class="curbaT">
        <img src="https://via.placeholder.com/150x70" class="img" >
        <p class="p1">Curba la stanga - Este amplasat la cel mult 200 m de o curba la stanga. Conducatorul trebuie sa circule cu viteza redusa in curbe, iar daca vizibilitatea este redusa, toate manevrele (depasirea, oprirea, stationarea, mersul inapoi, intoarcerea) sunt interzise.</p>
   </div>