html - 如何集中一个 "short bio"？

Question

我为自己制作了一个简短的个人简介，其中包含我的照片、姓名和电子邮件。几个小时以来，我一直在尝试将它集中在我的页面中，但我找不到实现它的方法。

我为此使用了 Bootstrap，为图片创建了一个大小为 2 的列，为文本创建了一个大小为 10 的列。我尝试删除整个网格，使用 float: left 和 float: right 对齐图像和文本，然后集中所有内容，尝试 display: block; margin: 0 auto; 也是，但没有成功。

我认为解决方案在于创建一个单独的元素，该元素将图像和文本并排放置，然后将其集中，但我似乎找不到办法做到这一点。

如果有人解释如何达到预期效果，我将不胜感激。

编辑:这是我要实现的目标的图片:https://i.imgur.com/vWgPg2M.png

这就是我现在得到的:

.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

我定义了一个类 mycenter 并为其设置了 flexbox 属性。该类被添加到 行。 请注意 flex 属性对于旧版浏览器可能存在合规性问题。参见 here了解详情。

.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>