Как поместить все содержимое сайта в одну колонку и поместить в центре?

258

17 октября 2017, 01:57

У множества сайтов, даже у stack overflow есть отступы слева и справа. Когда страницу сужаешь этот блок с контентом едет и остается по середине. Как грамотно создать такие отступы и поместить контент в такой блок?

Answer 1

flexbox помогут (css закомментирован)

main { 
  display: flex; /*элемент теперь флекс*/ 
  justify-content: center; /* По центру*/ 
} 
main aside { /* Думаю тут понятно*/ 
  border: 1px solid #ff6666;  
  background: #ff9999;  
} 
main article { 
  flex: 0 0 70%; /*по ширине 70 процентов от контейнера*/ 
}

<main> 
  <aside> 
    <ul> 
      <li>Пункт 1</li> 
      <li>Пункт 2</li> 
      <li>Пункт 3</li> 
      <li>Пункт 4</li> 
      <li>Пункт 5</li> 
      <li>Пункт 6</li> 
      <li>Пункт 7</li> 
      <li>Пункт 8</li> 
      <li>Пункт 9</li> 
      <li>Пункт 10</li> 
    </ul> 
  </aside> 
  <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, quisquam commodi. Nemo ullam laborum doloribus nihil dolorem cum nobis omnis libero, inventore sed modi eaque quos quas temporibus repudiandae id. ipsum, dolor sit amet consectetur adipisicing elit. Tempore a ipsam deleniti, adipisci sunt dolor dolorem corporis magni! Blanditiis laudantium fugiat adipisci iusto, labore magni cum hic dignissimos repellendus distinctio.</article> 
</main>

Answer 2

Наиболее распространенный это наверное сделать обертку для контента, установить нужную ширину, сделать внешние отступы margin-left: auto; и margin-right: auto;

.container { 
  width: 300px; 
  margin-left: auto; 
  margin-right: auto; 
}

<div class="container"> 
  <h1> 
    Заголовок 
  </h1> 
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis earum aliquam aut architecto inventore iste iure. Eveniet vitae, aliquid sapiente obcaecati consequatur facilis asperiores soluta error minus, deleniti magnam ipsum. 
  </p> 
</div>