Проблема с группировкой встроенных элементов

У меня есть раздел, который я хочу выглядеть так, как если бы он был центрирован на странице. У меня есть четыре коробки, которые появляются inline, и я верю, что причина, по которой они не нравятся, сосредоточена, потому что все выровнено естественно слева. Дело в том, что я не хочу, чтобы содержимое, которое находится в этих ячейках, было сосредоточено, я хочу, чтобы они выровнялись влево.Проблема с группировкой встроенных элементов

Итак, как я могу сделать поля, как если бы они были центрированы внутри страницы, но не повлияли ли они на мой текст?

#contact-connect { 
 
    width: 80%; 
 
    height: auto; 
 
    margin: 0 10%; 
 
    padding: 80px 0; 
 
} 
 

 
#contact-connect-box-container { 
 
    margin: 0 auto; 
 
    width: auto; 
 
} 
 

 
.contact-connect-box { 
 
    width: 25%; 
 
    margin: 60px 0 0 0; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    transition:1s; -webkit-transition:1s; 
 
}

<div id="contact-connect"> 
 
    <div id="contact-connect-box-container"> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Call</h2> 
 
      <div class="contact-connect-description">vcxv</div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Write</h2> 
 
      <div class="contact-connect-description"> 
 
       Reach out to us 
 
       <br> 
 
       <div id="scroll" class="contact-connect-link">Fill out our contact form.</div> 
 
      </div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Visit</h2> 
 
      <div class="contact-connect-description"> 
 
       fgrge 
 
      </div> 
 
     </div> 
 
     <div class="contact-connect-box"> 
 
      <h2 class="contact-connect-title">Connect</h2> 
 
      <div class="contact-connect-description"> 
 
       <div class="contact-connect-link"><a href="http://facebook.com" target="_blank">Visit us on Facebook</a></div> 
 
       <div class="contact-connect-link"><a href="http://youtube.com" target="_blank">See us on Youtube</a></div> 
 
       <div class="contact-connect-link"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-05-06 Becky

ли это выглядеть, как вы хотите, если вы удалите флажок Connect? – stackunderflow

Используйте стандартный 'text-align: center' на divs и переопределите его на своих дочерних элементах. В противном случае мы смотрим на flexbox, я подозреваю. В зависимости от ваших требований. –

Он не отображается 'text-align: center' и оставлен сработал, если только я не сделал это неправильно. – Becky

Вы можете просто добавить "дисплей: сгибать" на # контактно-подключения ящика-контейнера

#contact-connect-box-container { 
    margin: 0 auto; 
    width: auto; 
    display: flex; 
}

DEMO: https://jsfiddle.net/w776Lq1u/8/

источник

2016-05-06 15:21:14 Sylvain

Моя проблема: у меня нет границ на фактической странице, поэтому она по-прежнему не центрирована. – Becky

Затем просто не устанавливайте определенную ширину для отдельных полей. – stackunderflow

Как еще я это сделаю ?? – Becky

Проблема заключается в том маржа в правой части «Connect». Я бы рекомендовал использовать flexbox и использовать display: flex; justify-content: space-around; Таким образом, вам не нужны никакие поля.

EDIT: plnkr

источник

2016-05-06 15:24:05

Не помогло. Он по-прежнему не выглядит центрированным. Это потому, что все выровнено слева. – Becky

Ничего не выровняйте. –

Текст естественно выровнен слева, и именно так я его хочу. У меня на самом деле нет 'align: left;' в моем коде. – Becky

Проблема с группировкой встроенных элементов

ответ

Смежные вопросы