Разделил блок по полам, нужно выровнять обе части по центру главного блока.
Не понимаю, как возможно сделать выравнивание?(за исключением 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.
image
? Я чего-то не знаю?