DIV的响应中心对齐而不是文本

Question

我想将DIV居中放置在DIV中而不是文本中，所有解决方案都说要指定我的宽度并将边距设置为auto，但是如果它是响应式构建，就像我将其设置为宽度一样，那该如何工作？是？我想对齐联系人信息DIVS，而不是文本。希望这足够清楚。

谢谢！

<div id="upperfooter">
  <div class="container">
	  <div id="links">
	<div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
		  <div class="contact-item">
		    <h3><strong>COMPANY INFO</strong></h3>
		    <p>About Nielsen</p>
			  <p>Investor Relations</p>
			  <p>Nielsen Families</p>
			  <p>Responsibility & Sustainability</p>
			  <p>Press Room</p>
			  <p>Careers</p>
			  <p>Contact Us</p>
	  	</div>
	</div>
	  <div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
		  <div class="contact-item">
		    <h3><strong>INSIGHTS</strong></h3>
		    <p>Newswire</p>
		    <p>Reports</p>
		    <p>News Center</p>
		    <p>Top 10 &amp; Trends</p>
		    <p>How We Measure</p>
		    <p>Webinars &amp; Events</p>
		    <p>Newsletter Sign-up</p>
		  </div>
	</div>
    <div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
		  <div class="contact-item">
		    <h3><strong>SOLUTIONS</strong></h3>
		    <p>Advertising Effectiveness</p>
		    <p>Audience Measurement</p>
		    <p>Marketing ROI</p>
		    <p>Price and Promotion</p>
		    <p>Product Development</p>
		    <p>Reputation Management</p>
		    <p>Shopper</p>
		  </div>
	</div>
	  </div>
  </div>
</div>

Answer 1

您应在主div上添加position: relative并在联系人div上设置较小的宽度，这对我有用。

Answer 2

由于我看到的唯一未居中的元素是带有 contact-info 的元素，但是只有在屏幕尺寸较大时，一种方法是为包装器添加一些样式。另外，您还必须建议 col-x div应该由在Bootstrap上具有 row class 的div包装。因此，我们要向此包装器添加样式display:flex和justify-content:center。请查看下一个示例，其中删除了多余的类，并添加了边框，因此您可以在可视化文件中找到参考。

.contact-info {
  border: 1px solid blue;
}

.contact-item {
  border: 1px solid red;
}

.row {
  border: 1px solid green;
  display: flex;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="upperfooter">
  <div class="container">
    <div id="links" class="row">

      <div class="contact-info col-lg-3 col-xs-4">
        <div class="contact-item">
          <h3><strong>COMPANY INFO</strong></h3>
          <p>About Nielsen</p>
          <p>Investor Relations</p>
          <p>Nielsen Families</p>
          <p>Responsibility & Sustainability</p>
          <p>Press Room</p>
          <p>Careers</p>
          <p>Contact Us</p>
        </div>
      </div>

      <div class="contact-info col-lg-3 col-xs-4">
        <div class="contact-item">
          <h3><strong>INSIGHTS</strong></h3>
          <p>Newswire</p>
          <p>Reports</p>
          <p>News Center</p>
          <p>Top 10 &amp; Trends</p>
          <p>How We Measure</p>
          <p>Webinars &amp; Events</p>
          <p>Newsletter Sign-up</p>
        </div>
      </div>

      <div class="contact-info col-lg-3 col-xs-4">
        <div class="contact-item">
          <h3><strong>SOLUTIONS</strong></h3>
          <p>Advertising Effectiveness</p>
          <p>Audience Measurement</p>
          <p>Marketing ROI</p>
          <p>Price and Promotion</p>
          <p>Product Development</p>
          <p>Reputation Management</p>
          <p>Shopper</p>
        </div>
      </div>

    </div>
  </div>
</div>