Vertical center image in div

Question

I want to center vertically my image with the text div at the right of the image but it doesn't care about my-auto (bootstrap) or text-align: middle

Thanks a lot for helping me :)

.event-item {
    margin-top: 30px;
    margin-bottom: 30px;
}
 
.event-item-left p, .event-item-center p {
    font-size: 25px;
    font-weight: 300;
    margin: 0;
}

<div class="event-item container-fluid col-12">
    <div class="row justify-content-center">
        <div class="event-item-left col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-4 text-left my-auto">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Event `enter code here`logo" class="my-auto mr-4" width="80px" height="80px" style="display: inline-block; vertical-align: unset;">
            <div style="display: inline-block; max-width: 300px;">
                <h1 style="font-family: 'Open Sans'; font-weight: 600;">VEN 24 AVR</h1>
                <p>ROAD TO VEGAS STEP 1 MANCHE 4 TEST 1 2 3</p>
            </div>
        </div>
    </div>
</div>

score 2 · Accepted Answer · answered Apr 07 '20 at 18:51

You can use flexbox for the event-item-left conatiner.

.event-item {
    margin-top: 30px;
    margin-bottom: 30px;

.event-item-left {
    display: flex;
    align-items: center;
}
 
.event-item-left p, .event-item-center p {
    font-size: 25px;
    font-weight: 300;
    margin: 0;
}

<div class="event-item container-fluid col-12">
    <div class="row justify-content-center">
        <div class="event-item-left col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-4 text-left my-auto">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Event `enter code here`logo" class="my-auto mr-4" width="80px" height="80px" style="display: inline-block; vertical-align: unset;">
            <div style="display: inline-block; max-width: 300px;">
                <h1 style="font-family: 'Open Sans'; font-weight: 600;">VEN 24 AVR</h1>
                <p>ROAD TO VEGAS STEP 1 MANCHE 4 TEST 1 2 3</p>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Apr 07 '20 at 18:57

not exactly clear how you want this to display but flexbox is definitely the way to go. You should try to search stackoverflow first before you post a question. For instance, do a search on "how to center text next to a div". I'm sure you see plenty of examples

.event-item {
    margin-top: 0px;
    margin-bottom: 0px;
}
 
.event-item-left p, .event-item-center p {
    font-size: 25px;
    font-weight: 300;
    margin: 0;
    
}

.event-item-left{
display:flex;
    align-items:center;
    justify-content:center;
    border:solid 2px black;
    }
    
    img{
    display:block;
    border:solid 1px red;
    }
    
    h1{
    margin:0;
    }

<div class="event-item container-fluid col-12">
    <div class="row justify-content-center">
        <div class="event-item-left col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-4 text-left my-auto">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Event `enter code here`logo" class="my-auto mr-4" width="80px" height="80px" style="display: inline-block; vertical-align: unset;">
            <div >
                <h1 style="font-family: 'Open Sans'; font-weight: 600;">VEN 24 AVR</h1>
                ROAD TO VEGAS STEP 1 MANCHE 4 TEST 1 2 3
            </div>
        </div>
    </div>
</div>

Vertical center image in div

2 Answers2