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

Question

我想在一个 DIV 中而不是文本中居中一个 DIV，所有解决方案都说要指定我的宽度并将边距设置为自动，但是如果它是一个响应式构建，就像我设置它不会设置的宽度一样，它是如何工作的是？我想对齐联系信息 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

您应该将 position: relative 添加到主 div 并在联系人 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>