Есть ли способ удалить пробелы в моей сетке CSS3 и центрировать сетку? - PullRequest
Новая
       4

Есть ли способ удалить пробелы в моей сетке CSS3 и центрировать сетку?

0 голосов
/ 07 февраля 2019

Я создал родительский Div с тремя детьми Div внутри.Я хочу, чтобы каждый из 3-х Div был в одном столбце, но в центре экрана с 10px, отделяя границу друг от друга, сохраняя при этом 3 поля по центру экрана.

Я очень хорошо разбираюсь в CSS3 

#prices {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        margin: auto;
    }



    #tenor,
    #bass,
    #valvet {
        border: 1px solid;
        width: 100%;
        max-width: 360px;
        height: 330px;
        text-align: center;
        margin: 10px;

    }

    #tenor {
        justify-self: end;

    }

    #bass {
        justify-self: center;
<!-- Beginning of HTML5 Code -->


    <div id="prices">
        <div id="tenor">
            <h3>TENOR TROMBONE</h3>
            <h4>$600</h4>
            <p>
                Lorem ipsum.<br>
                Lorem ipsum.<br>
                Lorem ipsum dolor.<br>
                Lorem ipsum.
            </p>
            <button class="btn">Select</button>

        </div>

        <div id="bass">
            <h3>BASS TROMBONE</h3>
            <h4>$900</h4>
            <p>
                Lorem ipsum.<br>
                Lorem ipsum.com<br>
                Lorem ipsum dolor.<br>
                Lorem ipsum.
            </p>
            <button class="btn">Select</button>

        </div>

        <div id="valvet">
            <h3>VALVET TROMBONE</h3>
            <h4>$1200</h4>
            <p>
                Plays similar to a Trumpet.<br>
                Great for Jazz Bands.<br>
                Lorem ipsum.
                <p><button class="btn">Select</button>
                </p>
        </div>


    </div>

С кодом, приведенным выше, все идеально отцентрировано, но между каждым из 3 полей имеются огромные промежутки.Как убрать пропуски, но убедиться, что он по-прежнему центрирован относительно экрана?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Попробуйте это, используя margin: 10px; эти три идентификатора #tenor, #bass, #valvet.Если вам не нужен разрыв между столбцами сетки, вы должны использовать margin: 10px 0; в этих трех идентификаторах #tenor, #bass, #valvet. 

#prices {
    display: flex;
    justify-content:center;
    align-items:center;
    margin: auto;
}
#tenor,
#bass,
#valvet {
    border: 1px solid;
    width: 100%;
    max-width: 360px;
    height: 330px;
    text-align: center;
    margin: 10px 0;
}
<html>
<head>
<body>

<div id="prices">
    <div id="tenor">
        <h3>TENOR TROMBONE</h3>
        <h4>$600</h4>
        <p>
            Lorem ipsum.<br>
            Lorem ipsum.<br>
            Lorem ipsum dolor.<br>
            Lorem ipsum.
        </p>
        <button class="btn">Select</button>

    </div>

    <div id="bass">
        <h3>BASS TROMBONE</h3>
        <h4>$900</h4>
        <p>
            Lorem ipsum.<br>
            Lorem ipsum.com<br>
            Lorem ipsum dolor.<br>
            Lorem ipsum.
        </p>
        <button class="btn">Select</button>

    </div>

    <div id="valvet">
        <h3>VALVET TROMBONE</h3>
        <h4>$1200</h4>
        <p>
            Plays similar to a Trumpet.<br>
            Great for Jazz Bands.<br>
            Lorem ipsum.
            <p><button class="btn">Select</button>
            </p>
    </div>


</div>

</body>
</head>
</html>
0 голосов
/ 07 февраля 2019

Вы можете использовать свойство flex для CSS, чтобы достичь этого

JSFiddle 

<html>
<head>
<style>
 #prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
</style>
<body>
<div id="prices">
<div id="tenor">
    <h3>TENOR TROMBONE</h3>
    <h4>$600</h4>
    <p>
        Lorem ipsum.<br>
        Lorem ipsum.<br>
        Lorem ipsum dolor.<br>
        Lorem ipsum.
    </p>
    <button class="btn">Select</button>

</div>

<div id="bass">
    <h3>BASS TROMBONE</h3>
    <h4>$900</h4>
    <p>
        Lorem ipsum.<br>
        Lorem ipsum.com<br>
        Lorem ipsum dolor.<br>
        Lorem ipsum.
    </p>
    <button class="btn">Select</button>

</div>

<div id="valvet">
    <h3>VALVET TROMBONE</h3>
    <h4>$1200</h4>
    <p>
        Plays similar to a Trumpet.<br>
        Great for Jazz Bands.<br>
        Lorem ipsum.
        <p><button class="btn">Select</button>
        </p>
</div>


</div>

</body>
</head>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...