如何在CSS网格中以相同高度对齐按钮

我有一个这样的CSS网格设置:

https://egorchern.github.io/My_WebDev_Portfolio/Projects.html

我想使按钮在垂直方向上等距对齐。我试过使用position:absolute;但是按钮却开箱即用,因为元素没有移动以为按钮留出空间。

码:

HTML:

            <div class="project_cards-grid-item">
                <div class="thumbnail">
                    <img src="Assets/Prj1Preview.PNG">
                </div>
                <p class="alignCenter">A chess app with different game modes and an AI. Made in C# and WPF</p>

                <div class="viewProjectBtnContainer">
                    <span class="btn">Expand</span>
                </div>
            </div>
            <div class="project_cards-grid-item">
                <div class="thumbnail">
                    <img src="Assets/Prj1Preview.PNG">
                </div>
                <p class="alignCenter">Something else</p>
                <div class="viewProjectBtnContainer">
                    <span class="btn">Expand</span>
                </div>

            </div>
            <div class="project_cards-grid-item">
                <div class="thumbnail">
                    <img src="Assets/Prj1Preview.PNG">
                </div>
                <p class="alignCenter">Something else</p>
                <div class="viewProjectBtnContainer">
                    <span class="btn">Expand</span>
                </div>

            </div>
            <div class="project_cards-grid-item">
                <div class="thumbnail">
                    <img src="Assets/Prj1Preview.PNG">
                </div>

                <p class="alignCenter">Something else</p>
                <div class="viewProjectBtnContainer">
                    <span class="btn">Expand</span>
                </div>
            </div>

CSS:

#project_cards-grid {
    display:grid;
    grid-column-gap: 2vw;
    grid-row-gap: 40px;
    padding:30px;


}
.project_cards-grid-item {
    padding:5px;
    width:100%;
    background-color:white;
    position:relative;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    border: 2px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.45rem;
}
.thumbnail {

    width:100%;

    margin-bottom: 15px;



}
.viewProjectBtnContainer{

    margin-bottom:8px;

    display:flex;
    justify-content:center;
    align-items:center;

}
.btn{
cursor:pointer;
    position:relative;
    padding:10px 20px;
    background:white;
    font-size:28px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 0.8s;
    &:after,&:before{
        content:" ";
        width:10px;
        height:10px;
        position:absolute;
        border :0px solid #fff;
        transition:all 0.8s;
        }
    &:after{
        top:-1px;
        left:-1px;
        border-top:4px solid black;
        border-left:4px solid black;
    }
    &:before{
        bottom:-1px;
        right:-1px;
        border-bottom:4px solid black;
        border-right:4px solid black;
    }
    &:hover{
        border-top-right-radius:0px;
       border-bottom-left-radius:0px;
        // background:rgba(0,0,0,.5);
        // color:white;
        &:before,&:after{

            width:100%;
            height:100%;
            // border-color:white;
        }
    }
}
评论
  • psunt
    psunt 回复

    您可以通过多种方式解决此问题,但我认为最简单的方法是将以下内容添加到您的css文件中:

    .project_cards-grid-item {
      display: flex;
      flex-direction: column;
    }
    
    .viewProjectBtnContainer {
      margin-top: auto;
    }