0

Разделил блок по полам, нужно выровнять обе части по центру главного блока.
Не понимаю, как возможно сделать выравнивание?(за исключением margin)

.img_cherry_one {
  width: 143px;
  height: 135px;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_one:hover {
  width: 153px;
  height: 145px;
}

.fire__one {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.text__bf__left {
  float: left;
  /*margin: 0 2rem 0 2rem;*/
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}

.img__bf__right {
  width: 50%;
  float: right;
  border-radius: 8px;
  margin: 0rem 0 2.5rem 0;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}


/*
.img__bf__right:hover{
    width: 53%;
}*/

.text__bf__right {
  float: right;
  margin: auto;
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}

.img__bf__left {
  width: 50%;
  float: left;
  border-radius: 8px;
  margin: 0rem 0 0rem 0;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_two {
  width: 147px;
  height: 147px;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_two:hover {
  width: 157px;
  height: 157px;
}


/*
.img__bf__left:hover{
width: 53%;
}*/

.fire__two {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.fire__three {
  max-width: 100%;
  margin: 2rem 0 0rem 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.img__bf__right__three {
  width: 211;
  height: 242;
  float: left;
  border-radius: 8px;
  margin: 0 auto;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.text__bf__left__three {
  float: right;
  margin: auto;
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}
<div class="fire__one">
  <div class="text__bf__left"><img class="img_cherry_one" src="/images/cherry_Surprise.png"><br>ТУТ текст</div>
  <image class="img__bf__right" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"></image>
</div>
<!--fire_one-->

<div class="fire__two">
  <image class="img__bf__left" src="images/Рисунок2.png"></image>
  <div class="text__bf__right"><img class="img_cherry_two" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"><br>ТУТ текст</div>
</div>
<!--fire_two-->

<div class="fire__three">
  <div class="text__bf__left__three"><img class="img_cherry_two" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"><br>тут текст</div>
  <image class="img__bf__right__three" src="images/Рисунок3.png"></image>
</div>
<!--fire__three-->

Понимаю, что выглядит не в кайф без картинок.. но изображение которые над текстом - 150x150, а по бокам от текста 700x500.

2
  • Что за тег image ? Я чего-то не знаю?
    – Air
    Commented 3 сент. 2021 в 6:09
  • @Air где-то увидел, работает. Браузер воспринимает его, как img.
    – Artem L.
    Commented 3 сент. 2021 в 7:27

1 ответ 1

0
  1. Если вы используете flex, то при чем тут float? Каша какая-то.
  2. Если вам нужна подпись под картинкой воспользуйтесь семантическими тегами figure и figcaption.

.img_cherry_one {
  width: 143px;
  height: 135px;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_one:hover {
  width: 153px;
  height: 145px;
}

.fire__one {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}

.text__bf__left {
  /*margin: 0 2rem 0 2rem;*/
  text-align: center;
  font-size: 1.1rem;
}

.img__bf__right {
  width: 50%;
  border-radius: 8px;
  margin: 0rem 0 2.5rem 0;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}


/*
.img__bf__right:hover{
    width: 53%;
}*/

.text__bf__right {
  float: right;
  margin: auto;
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}

.img__bf__left {
  width: 50%;
  float: left;
  border-radius: 8px;
  margin: 0rem 0 0rem 0;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_two {
  width: 147px;
  height: 147px;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.img_cherry_two:hover {
  width: 157px;
  height: 157px;
}


/*
.img__bf__left:hover{
width: 53%;
}*/

.fire__two {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.fire__three {
  max-width: 100%;
  margin: 2rem 0 0rem 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.img__bf__right__three {
  width: 211;
  height: 242;
  float: left;
  border-radius: 8px;
  margin: 0 auto;
  -webkit-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -moz-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -ms-transition: all .4s ease-in-out, transform .2s ease-in-out;
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
}

.text__bf__left__three {
  float: right;
  margin: auto;
  text-align: center;
  font-size: 1.1rem;
  vertical-align: middle;
}
<div class="fire__one">
  <div class="text__bf__left"><img class="img_cherry_one" src="/images/cherry_Surprise.png"><br>ТУТ текст</div>
  <image class="img__bf__right" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"></image>
</div>
<!--fire_one-->

<div class="fire__two">
  <image class="img__bf__left" src="images/Рисунок2.png"></image>
  <div class="text__bf__right"><img class="img_cherry_two" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"><br>ТУТ текст</div>
</div>
<!--fire_two-->

<div class="fire__three">
  <div class="text__bf__left__three"><img class="img_cherry_two" src="https://pbs.twimg.com/profile_images/838037711374135300/4KkbdVwT_400x400.jpg"><br>тут текст</div>
  <image class="img__bf__right__three" src="images/Рисунок3.png"></image>
</div>
<!--fire__three-->

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.