Как вы центрируете 3 деления подряд? - PullRequest
Новая
       13

Как вы центрируете 3 деления подряд?

2 голосов
/ 19 апреля 2019

У меня проблемы с переводом моих 3-х делителей в центр.Они кажутся почти центрированными, но с правой стороны все еще больше пустого пространства, чем слева.Я включаю мои HTML и CSS вместе со ссылкой на сайт.

http://alexrdzv2.herokuapp.com/index.html

Кроме того, когда я увеличиваю окно, становится еще хуже.

Я должен отметить, что контейнер, в который он помещен, имеет только следующие свойства: ширина: 80%, поле: авто и переполнение: скрыто.У меня есть все разделы на моей странице, завернутые в этот контейнер, но я знаю, что это не проблема, поскольку я пытался сделать это без него, и ящики по-прежнему не будут правильно центрироваться. 

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}
<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

Ответы [ 2 ]

2 голосов
/ 19 апреля 2019

Вы можете использовать flexbox функцию CSS3 для центрирования своих ящиков, для этого вам нужно добавить ниже CSS в вашем container классе. 

.container {
    display: flex;
    justify-content: center;
}


.container {
    display: flex;
    justify-content: center;
}

#boxes {
    min-height: 200px;
    margin-top: 20px;
}

#boxes .box {
    margin-top: 20px;
    float: left;
    text-align: center;
    width: 30%;
    padding: 10px;
  }

#boxes .fab {
    padding: 0 5px;
}
<section id="boxes">
    <div class="container">
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>
0 голосов
/ 20 апреля 2019

Это можно сделать с помощью Bootstrap очень легко, если вы хотите использовать библиотеку.Вы можете просто добавить класс строки в контейнер div и добавить col-md-3 к каждому элементу div.Строки в начальной загрузке имеют ширину 12 единиц, поэтому col-md-3 - это столбец с одной третью доступной ширины.

<section id="boxes">
    <div class="container row">
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alkej cklvne alke.</p>
        </div>
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus.</p>
        </div>
        <div class="box col-md-3">
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="">Color Game</a></h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo facere aut ipsum possimus..</p>
        </div>
    </div>
</section>

дальнейшую документацию по этой теме в начальной загрузке можно найти здесь: https://getbootstrap.com/docs/4.1/layout/grid/

загружаемые файлы для начальной загрузки можно найти здесь: https://getbootstrap.com/docs/4.1/getting-started/download/

Хотя Bootstrapэто не единственное решение, это то, что я предпочел бы использовать.

...