Question

我为我做了一个简短的简历，有我的照片，我的名字和电子邮件。我已经花了好几个小时将其集中在我的页面中，但我无法找到办法。

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

我认为解决方案在于创建一个单独的元素，将图像和文本放在一边，然后集中它，尽管我似乎无法找到一种方法。

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

编辑：以下是我的意思：https://i.imgur.com/vWgPg2M.png

这就是我现在所得到的：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我定义了一个类mycenter并为其设置了flexbox属性。该课程已添加到row。请注意，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>

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>

如何集中一个＆＃34;短生物＆＃34;？

2 个答案: