时间戳

首页 > 解决方案 > HTML CSS 将行的内容与居中的行跨度对齐

html - 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=Roboto&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 中居中，行跨度为 2。这些按钮之间需要有 40% 的间距。我已经给了他们距离，但他们还没有居中。

我怎样才能得到我想要的？

标签： htmlcss

解决方案

只需将 display of 设置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%;
}

推荐阅读