在容器内定位信息

时间:2018-02-16 19:38:37

标签: javascript html css twitter-bootstrap

我正在尝试在居中徽标下方的空白处添加进度条。但由于我使用容器流体,我不能使用“align-items-end”因为由于某种原因它更多地扩展了容器高度。有人可以告诉我应该如何改变这一点,以便我可以在徽标下方添加更多信息,而不是搞乱“创建”和“探索”定位吗?

/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/

body {
  font-family: 'Rubik', sans-serif;
  background-color: #161925;
  color:#FDFFFC;
}
h4{
  color:#FDFFFC;
}
.button{
    background-color:#F1D302;
}
<link href="/css/mastercss.css" rel="stylesheet">
<body>
  <img src="/img/logo.png" width="100" height="140">

  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-6">
        <a href="#" name="redirectCreate" onClick="redirectCreate()">
          <h1 class="text-center">
              Create</h1>
        </a>
      </div>
      <div class="col-6 text-center">
        <a href="#" name="redirectExplore" onClick="redirectExplore()">
          <h1 class="text-center">
              Explore</h1>
        </a>
      </div>

    </div>
    <div class="row align-items-end">
      <div class="row">
    HI
  </div>
      </div>
    </div>
  </div>

1 个答案:

答案 0 :(得分:0)

当您“运行代码段”时,徽标不会居中。

虽然你可以在你想要居中的任何地方添加<center></center>标签。或者在CSS中为该类使用text-align:center