Aligning text always in the center of div next to image? - html

Question

https://jsfiddle.net/joel081112/6yud4bvo/3/
I have this fiddle which shows my current situation. I cant get my text to always be aligned in the middle of the div next to the image. At the minute the text stays level with the top of the div.
I have tried vertical-aligned and top: 50% but I must be missing something easy
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
.homeIm1 {
height: auto;
float: right;
}
.item {
display: flex;
width: 100%;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item > div {
width: 50%;
}
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
That code is the crux of what I'm using

Answer 1

Since your .item element is a flexbox set align-items: center on the item:
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
}
.homeInfo2 {
padding: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>

Answer 2

Try using flex.
You have to create a div next to the image and then justify-content-center and align-items-center. For more information use google :) Especially css-tricks would be helpful! CSS-Tricks

Answer 3

Just add align-items: center; in your item class.
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
float: right;
}
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>