Question

我右边有一个按钮标题，但我遇到了两个问题：

我希望标题位于页面中央;
我希望按钮和标题位于同一水平线上。

这是我的代码：

<div class="container">
  <div class="row">
    <div class="btn btn-primary pull-right">This is a long button</div>
    <h1 class="text-center">This is a long title</h1>
  </div>
</div>

这是我的demo。

请帮帮我，谢谢。

Answer 1

使用此代码获得所需的结果：

HTML：

  <div class="container">
   <div class="row">
  <div class="col-xs-2"></div>
  <div>
  <h1 class="col-xs-8 text-center">This is a long title</h1>
  </div> 
  <div class="btn btn-primary col-xs-2 pull-right mar">Follow</div>
</div>
</div>

CSS：

.mar{
  margin-top: 20px;
}

Answer 2

只需将此数据添加到新的CSS文件或现有的CSS文件中即可。

#bt {
width: 100%;
}

.text-center {
width: 100%;
}

同时为按钮添加ID为“bt”。

Answer 3

将h1上的margin-top设为零

.text-center {
    margin-top: 0;
}

至少在你的代码笔中完成了这个技巧。

将来，在这种情况下，总是使用浏览器上的检查器来查看元素的盒子模型，这有很大帮助。如果您需要有关箱型号的更多信息：http://www.w3schools.com/css/css_boxmodel.asp

Answer 4

将Div宽度设为100％并使用文本对齐属性。

<h2 style="text-align: center">XYZ</h2>

然后使用margin-top属性调整你的buttton。

像这样： -

 <div class="container">
     <div class="row">
   <div class="col-xs-2"></div>
   <div>
  <h1 class="col-xs-8 text-center" **style="margin-top: 0"**>This is a long title</h1>
     </div> 
   <div class="btn btn-primary col-xs-2 pull-right">Follow</div>

   </div>
  </div>

Answer 5

您可以使用标签

示例：

<a href="index.html" class="active"><center>long title</center></a>

如何在页面中间设置标题？

5 个答案: