Блог

Главная - Вопросы по программированию - HTML CSS Выравнивает содержимое строки по ширине строки в центре

HTML CSS Выравнивает содержимое строки по ширине строки в центре

#html #css

#HTML #css

Вопрос:

У меня проблема. У меня есть страница, которая использует сетку css в качестве итоговой. На странице у меня есть левая и правая стороны. Затем я хочу добавить 2 кнопки. Эти кнопки должны быть центрированы с шириной строки 2. Расстояние между этими кнопками должно составлять 40%. Вот код, который у меня есть сейчас:

 .grid-pagina {
    width: 90%;
    margin: auto auto;
    display: grid;
    grid-template-columns: 45% auto;
    column-gap: 20px;
    padding-top: 30px;
}

.leftside {
    width: 100%;
    height: 90%;
    text-align: left;
}

.rightside {
    width: 50%;
    height: 90%;
    font-family: 'Roboto', sans-serif;
}

.country {
    top: 25px;
    right: 25px;
    position: absolute;

}

.country img {
    border-radius: 32px;
    height: 64px;
    width: 64px;
}


.title {
    font-size: 35px;
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: red;
}

.image-container {
    position: relative;
    width: 100%;
    display: inline-block;
}

.coverimage {
    border-radius: 30px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

.activity-container {
    position: absolute;
    top: 0;
    padding-left: 10px;
}

.activity {
    display: flex;
    align-content: center;
    justify-content: center;
    color: red;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.activity img {
    height: 50px;
}

.activity span {
    padding-left: 10px;
    margin: auto auto;
}



.user-info {
    position: absolute;
    bottom: 0;
    left: 0;
    vertical-align: bottom;
    padding-left: 30px;
    padding-bottom: 20px;
}

.user-info .user-name {
    font-size: 30px;
    font-weight: bold;
    color: white;
    padding-bottom: 5px;
}

.user-info .user-details {
    font-size: 20px;
    color: white;
}


.smalltitle {
    font-size: 25px;
    color: red;
}


.interests-container {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 20px;
    padding-top: 10px;
    padding-bottom: 30px;
}

.interest {
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interest img {
    height: 20px;
    padding-right: 4px;
}



.languages-container {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    column-gap: 5px;
    padding-top: 10px;
    padding-bottom: 30px;
}

.language {
    height: 30px;
    width: 50px;
}

.language img {
    height: 30px;
    width: 50px;
    padding-right: 4px;
}

.bio p {
    width: 100%;
}

.bio p {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}


.buttons-container {
    grid-row: 3 / span 2;
    display: grid;
    grid-template-columns: 80px 80px;
    column-gap: 40%;
}

.button-round {
  background-color: white;
  width: 80px;
  height: 80px;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 30px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button-round img {
    width: 90%;
    height: 90%;
}

.button-round:hover {
    background-color: #cfcfcf;
    cursor: pointer;
} 
 <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Tim - Matching - SamenOpReis</title>
    <link rel="stylesheet" href="css/page/match_profiel.css">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Robotoamp;display=swap" rel="stylesheet">
    <script src="js/main.js"></script>
</head>
<body>
    <header></header>
    <nav></nav>

    <div class="Container">
        <div class="grid-pagina">
            <div class="title">
                    Noorwegen
            </div>
            <div></div>
            <div class="leftside">
                
                <div class="image-container">
                    <img src="img/page/match_profiel/rome.png" class="coverimage"/>
                    <div class="activity-container">
                        <div class="activity">
                            <img src="img/page/match_profiel/sun.png"> <span>Zonnig</span>
                        </div>
                        <div class="activity">
                            <img src="img/page/match_profiel/icon_boat_red.png"> <span>Zonnig</span>
                        </div>
                        <div class="activity">
                            <img src="img/page/match_profiel/icon_climb.png"> <span>Zonnig</span>
                        </div>
                    </div>
                    
                    <div class="country">
                        <img src="img/flag/dutch.png">
                    </div>
                    
                    <div class="user-info">
                        <div class="user-name">
                            Tim van langedijk
                        </div>
                        <div class="user-details">
                            26 Jaar, Man<br> €2000 - €3000
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightside">
                <div class="smalltitle">Interesses</div>
                <div class="interests-container">
                    <div class="interest">
                        <img src="img/page/match_profiel/icon_tag.png"> Boten
                    </div>
                    <div class="interest">
                        <img src="img/page/match_profiel/icon_tag.png"> Boten
                    </div>
                    <div class="interest">
                        <img src="img/page/match_profiel/icon_tag.png"> Boten
                    </div>
                </div>
                <div class="smalltitle">Taal(en)</div>
                <div class="languages-container">
                    <div class="language">
                        <img src="img/flag/dutch.png">
                    </div>
                    <div class="language">
                        <img src="img/flag/france.jpg">
                    </div>
                </div>
                <div class="smalltitle">Over</div>
                <div class="bio">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                        and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                        leap into electronic typesetting, remaining essentially unchanged. </p>
                </div>
            </div>
            <div class="buttons-container">
                <button class="button-round">
                    <img src="img/page/match_profiel/decline.png">
                </button>
                
                <button class="button-round">
                    <img src="img/page/match_profiel/accept.png">
                </button>
            </div>
        </div>
    </div>

    <footer></footer>
</body>
</html>

Теперь эти кнопки имеют расстояние 40%, но родительская сетка кнопок не центрирована в .grid-pagina . Я уже пробовал align: center; , но это не имеет эффекта. Я также не могу настроить .grid-pagina на flex, я думаю, потому что это испортило бы остальную часть страницы.

Вот набросок того, что я хочу: введите описание изображения здесь

Итак, я хочу, чтобы 2 кнопки внизу страницы были центрированы в .grid-pagina с rowspan 2. Расстояние между этими кнопками должно составлять 40%. Я уже указал им расстояние, но они еще не центрированы.

Как я могу получить то, что я хочу?

Ответ №1:

Просто установите отображение buttons-container на flexbox и центрируйте содержимое с помощью justify-content .

 .buttons-container {
    display: flex;
    justify-content: center;
    grid-column: 1 / 3;
}

Затем вы можете установить правое поле вашей первой кнопки в этом контейнере равным 40%.

 .buttons-container button:first-child {
    margin-right: 40%;
}