时间戳

首页 > 解决方案 > DIV的响应中心对齐但不是文本

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

问题描述

我想在 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>

标签： htmlcsstwitter-bootstrapalignmentfooter

解决方案

由于我看到的唯一不居中的元素是那些带有contact-info的元素，但只有当屏幕尺寸很大时，一种方法是为包装器添加一些样式。此外，您必须记住col-x div 应该由Bootstrap 上具有行类的 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>

推荐阅读