Menu
I have an image and want a text next to it centered vertically. I can use text-center if its horizontal aligning but I need to align vertically. How can I do that? Is there any way in bootstrap to do this?
<div class="col-md-12 well">
<div class="col-md-3">
<img src="http://placehold.it/100x100"></img>
</div>
<div class="col-md-3">
<div>
This text should be centered vertically
</div>
</div>
</div>
Here is the codepen
545
How about using flexbox:
.well {
display: flex;
align-items: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 well">
<div class="col-md-3">
<img src="http://placehold.it/100x100"></img>
</div>
<div class="col-md-3">
<div>
This text should be centered vertically
</div>
</div>
</div>
<html><head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid">
</div>
<div class="col-3 align-self-center">
hello hello
</div>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
