How to centralize a “short bio”?

Question

I've made a short bio for me, which has my picture, my name and e-mail. I've been trying for hours to centralize it in my page, but I can't find a way to do it.

I used Bootstrap for this, making a column with size 2 for the picture and a column with size 10 for the text. I tried removing the whole grid thing, working with float: left and float: right to align the image and text and then centralizing everything, tried display: block; margin: 0 auto; display: block; margin: 0 auto; too, but no success.

I believe the solution lies in creating a single element which has the image and text side to side and then centralizing it, though I can't seem to find a way to do it.

I would be grateful if someone explained how to achieve the desired effect.

Edit: Here's a picture of what I mean to achieve: https://i.imgur.com/vWgPg2M.png

That's what I got right now:

 .profile-pic { border-radius: 50%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-xs-9"> <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853"> </div> <div class="col-md-10 col-xs-auto"> <h1>Telmo "Trooper"</h1> <h4><a href="mailto:telmo.trooper@gmail.com">telmo.trooper@gmail.com</a></h4> </div> </div> </div> 

Answer 1

I defined a class mycenter and set the flexbox property for it. The class is added to the row . Please note the flex property may have compliance issues for older browsers. See here for details.

 .profile-pic { border-radius: 50%; } .mycenter { display: flex; justify-content: center; align-items: center; text-align: center; } 

 <div class="container-fluid"> <div class="row mycenter"> <div class="col-md-2 col-xs-9"> <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853" width="200"> </div> <div class="col-md-10 col-xs-auto"> <h1>Telmo "Trooper"</h1> <h4><a href="mailto:telmo.trooper@gmail.com">telmo.trooper@gmail.com</a></h4> </div> </div> </div> 

Answer 2

I used the offset class of Bootstrap to push the div , and added text-align:center;

NOTE: This is only applicable when the browser's size is within the range of col-xs , this is because you included col-md , meaning when it reached the range of col-md , it will use whatever you put in col-md . To make it applicable to all, you can remove col-md in both div so that the col-xs will be the default class for all sizes

 body { text-align: center; } .profile-pic { border-radius: 50%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-xs-8 col-xs-offset-2"> <img class="img-responsive profile-pic" src="https://avatars0.githubusercontent.com/u/9438853"> </div> <div class="col-md-10 col-xs-8 col-xs-offset-2"> <h1>Telmo "Trooper"</h1> <h4><a href="mailto:telmo.trooper@gmail.com">telmo.trooper@gmail.com</a></h4> </div> </div> </div>