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; 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:[email protected]">[email protected]</a></h4>
    </div>
  </div>
</div>

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:[email protected]">[email protected]</a></h4>
    </div>
  </div>
</div>

more