css 如何使我的文本向上多一点，以中心对齐的网格图像在左边？

pbpqsu0x 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(142)

我怎样才能调出这个文本框，使它与左边的网格图像居中对齐？我试过使用填充和平移功能，但它什么也不做。我怎样才能使这个文本框居中对齐？谢谢帮助!

.sub-header{
    margin:100px
}
.container-header{
    padding: 2px;
}
.sub-header-image{
    display: grid;
}
#image2{
    grid-column: 2/ span 2;
    grid-row: 1 / span 2;
}
#image1{
    grid-column: 1 / span 3;
    grid-row: 2 / span 2;
}
.sub-header-image img{
    height: 300px;
    width: 475px;
}
.subheader-text{
    display:block;
    margin-left: auto;
    text-align: center;
    width: 40%;
}
.subheader-text h1{
    font-size: 30px;
}
.subheader-text p{
    font-size: 20px;
}

<section class="sub-header">
        <div class="container-sub-header">
            <div class="sub-header-image">
                <img id="image2" src="Images/shutterstock_388910350.jpg">
                <img id="image1" src="Images/Cedar_Creek_Abbey_Island_Ruby_Beach.jpeg">
            </div>
            <div class="subheader-text">
                <h1>A State for City Life and Outdoor Adventure</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                       tempor incididunt ut 
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud                         exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
                    culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </section>

css

来源：https://stackoverflow.com/questions/74978552/how-to-bring-my-text-up-a-bit-more-to-center-align-with-the-grid-image-on-the-le

1条答案

按热度按时间

uplii1fm1#

您需要添加下面的CSS来修复此问题

sub-header{
    margin:100px
}
.container-header{
    padding: 2px;
}
.container-sub-header{
  display: flex;
    justify-content: center;
    align-items: center;
}
.sub-header-image{
    display: grid;
    width: 70%;
}
#image2{
    grid-column: 2/ span 2;
    grid-row: 1 / span 2;
}
#image1{
    grid-column: 1 / span 3;
    grid-row: 2 / span 2;
}
.sub-header-image img{
    height: 300px;
    width: 475px;
}
.subheader-text{
    margin-left: auto;
    text-align: center;
    width:30%;
}

.subheader-text h1{
    font-size: 30px;
}
.subheader-text p{
    font-size: 20px;
}

<section class="sub-header">
        <div class="container-sub-header">
            <div class="sub-header-image">
                <img id="image2" src="Images/shutterstock_388910350.jpg">
                <img id="image1" src="Images/Cedar_Creek_Abbey_Island_Ruby_Beach.jpeg">
            </div>
            <div class="subheader-text">
                <h1>A State for City Life and Outdoor Adventure</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                       tempor incididunt ut 
                    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud                         exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in  
                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
                    culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </section>

赞(0）回复(0）举报 2023-01-03

我来回答

css 如何使我的文本向上多一点，以中心对齐的网格图像在左边？

1条答案

相关问题

热门标签

最新问答