Good day, I am trying to center two col-md-6 where the left side with the text is aligned in the center beside the image. here are my css:
.full_width {
width: 100% !important;
}
.align-row {
display:flex !important;
}
.align-row > *
{
align-self:end !important;
}
I tried to align it with align-row but the text goes to the bottom, any help would be appreciated.
<div class="full_width">
<div class="align-row row align-items-center">
<div class="col-md-6 text-align-center">
<span>
<h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2><br>
<h2 class="color-mwc-orange">REGISTER</h2><br>
<h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2>
</span>
</div>
<div class="col-md-6">
<img src="img/_stock_replace_this_1.jpg" class="img-responsive">
</div>
</div>
</div>
PS, I am using bootstrap 4
Use align-self:center;
to align center element
.align-row > *
{
align-self:center;
}
.full_width { width: 100%; } h2{ font-size:16px; } .align-row { display:flex; } .align-row > * { align-self:center; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="full_width"> <div class="align-row row align-items-center"> <div class="col-md-6 text-align-center"> <span> <h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2><br> <h2 class="color-mwc-orange">REGISTER</h2><br> <h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2> </span> </div> <div class="col-md-6"> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive"> </div> </div> </div>
Just use d-flex
and align-self-center
boostrap default class to align the content equally center.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 d-flex"> <div class="align-self-center"> <h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2> <br> <h2 class="color-mwc-orange">REGISTER</h2> <br> <h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2> </div> </div> <div class="col-md-6 col-sm-6"> <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid"> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.