Question

我只需要知道如何使用标题为'Hire Safely＆amp; amp;快速'和'没有人员配备代理'。因为它未完成，请忽略网站的其余部分。代码如下，开发网站链接在这里：http://staging.liberationmedical.com/new-design/

<div class="container-fluid firstcontainer" style="margin-top: 150px;">   
    <div class="row row-centered">
        <div class="col-md-6">
                <h2>Hire Safely &amp; Quickly</h2>
                <p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p>
                <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
        </div><!-- col-md-3 -->
        <div class="col-md-6">
                <h2>No Staffing Agencies</h2>
                <p class="icon-text3">With Liberation Medical, you'll be able to engage<br>directly with contract medical professionals,
avoid<br>staffing agency fees, and evade miscommunication<br>and mis- representation. Post unlimited jobs and<br>have unlimited contracts for free!</p>
                <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
        </div><!-- end col-md-3 -->    
    </div><!-- end row -->
</div><!-- end container-fluid -->

Answer 1

如果您熟悉CSS，可以在CSS文件中编辑相应的标签。看看这里：http://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 2

像zurb基础这样的bootstrap中没有中心类。您可以使用.md-offset-3将其置于中心

Answer 3

首先，<p>标记中的文字中包含换行符<br>，导致您的内容无法填写整个col-md-6，从而导致页面错误宽度感。我会找到适合您内容宽度的列宽，然后将它们偏移到页面中心。你可以这样做：

<div class="container-fluid firstcontainer" style="margin-top: 150px;">   
  <div class="row row-centered">
    <div class="col-md-3 col-md-offset-3">
            <h2>Hire Safely &amp; Quickly</h2>
            <p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p>
            <p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
    </div><!-- col-md-3 -->
    <div class="col-md-3 col-md-offset-3">
            <h2>No Staffing Agencies</h2>
            <p class="icon-text3">With Liberation Medical, you'll be able to engage<br> directly with contract medical professionals, avoid<br>staffing agency fees, and evade miscommunication<br> and mis-representation. Post unlimited jobs and<br>have unlimited contracts for free!
  </p> 
   <p class="icon-text4-subtext">
     <a class="links" href="#">Sign up for free</a>
   </p>
    </div><!-- end col-md-3 -->    
</div><!-- end row -->

这应该使您的列更靠近在一起，并且更多地移动到页面的中心。您可以使用偏移和列宽来根据自己的喜好进行操作。请记住，共有12列，包括抵消。

我做的另一件事是创建一个名为center的类，以便我可以将该类应用于我想要使所有内容居中的任何元素。像这样：

.center{text-align:center;}

如何在Bootstrap中居中行？

3 个答案: