如何在HTML

Question

我是HTML和CSS的新手，并尝试构建类似于主页的内容。

请参阅随附的屏幕截图。

如何在我的HTML项目中将这两个按钮BTN对齐在一个超大屏幕中。

  

我的HTML

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an indapendant recruitment company specialising in providing bespoke HR services.<br> We take the time to understand our clients vision, goals and culture allowing us to engage with the right talent to fill the vacany.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>

Answer 1

只需将您的按钮所在的text-center添加到<p>。

<强> HTML

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an indapendant recruitment company specialising in providing bespoke HR services.<br> We take the time to understand our clients vision, goals and culture allowing us to engage with the right talent to fill the vacany.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>

<强> DEMO HERE

Answer 2

当您使用boostrap时，请将“text-center”类添加到<p>

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an indapendant recruitment company specialising in providing bespoke HR services.<br> We take the time to understand our clients vision, goals and culture allowing us to engage with the right talent to fill the vacany.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
</div>

Answer 3

简单text-align: center就是解决方案。

这是fiddle

<强> CSS：

.center{
  text-align: center;
}

更新了HTML

<div class="jumbotron">
        <h1>Bespoke Recruitment Solutions</h1>
        <p class="lead">We are an indapendant recruitment company specialising in providing bespoke HR services.<br> We take the time to understand our clients vision, goals and culture allowing us to engage with the right talent to fill the vacany.</p>
        <p class="center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>
      </div>

由于jumborton是一个引导程序，因此您只能使用类名text-center到paragraph p按钮。

以下是示例 -

<p class="text-center"><a class="btn btn-primary btn-lg" role="button">Submit Your CV</a><a class="btn btn-primary btn-lg" role="button">Fill A Vacancy</a></p>