Адаптивное выравнивание по центру DIV, но не текста - PullRequest
Новая
       30

Адаптивное выравнивание по центру DIV, но не текста

0 голосов
/ 31 октября 2018

Я хочу центрировать 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>

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Поскольку единственные элементы, которые я вижу, не отцентрированы, это элементы с contact-info , но только при большом размере экрана, один из подходов заключается в добавлении некоторого стиля в оболочку. Кроме того, вы должны помнить, что col-x divs должны быть обернуты div с классом строк на Bootstrap. Итак, мы собираемся добавить стиль 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>
0 голосов
/ 31 октября 2018

Вы должны добавить position: relative к основному div и установить меньшую ширину для контактного div, который работал для меня.

...