html 为什么我的文本没有在引导行div中垂直居中?

sqougxex  于 2022-12-16  发布在  其他
关注(0)|答案(2)|浏览(166)

我使用了一个引导行,并试图居中一些文本,但文本是水平居中,而不是垂直居中。
∮ ∮现在的样子:

它应该看起来像这样:

第二张图片的“联系我”在div中垂直和水平居中。

代码

下面是我的HTML代码:

<div class="col-lg-6">
                    <h1 class="landing-header">PLACEHOLDER</h1>
                    <p class="landing-text">PLACEHOLDLER</p>

                    <div class="row landing-contact-me">
                        <div class="col-2"><a href="linkedin.com"><img class="img-fluid landing-socials"
                                    src="assets/linkedin.png"></a>
                        </div>
                        <div class="col-2"><a href="instagram.com"><img class="img-fluid landing-socials"
                                    src="assets/instagram.png"></a>
                        </div>
                        <div class="col-8 center">
                            <p id="landing-contact-me-text">contact me<p>
                        </div>
                    </div>
                </div>

正如您所看到的,我尝试为父div使用Center类,但是没有效果。
下面是相关类的CSS:

.landing-header {
    font-family: 'DM Serif Display';
    font-size: 4rem;
}

.landing-text {

    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    margin-right: 25%;
    text-align: justify;

}
.landing-contact-me {
    margin-top: 30%;
    margin-right: 25%;
    padding: 3% 2% 3% 2%;
    border-radius: 25px;
    background-color: white;
    box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
    align-items: center;
    text-align: center;
    
}
.landing-socials{
 max-width: 100%;
 height: auto;
}

#landing-contact-me-text{
    font-family: 'Montserrat';
    font-size: 1.25rem;
    font-weight: 200;
    text-align: center;
}

.center{
    text-align: center;
    vertical-align: middle;
}
wixjitnu

wixjitnu1#

align-items-center类与row类相加,将该行的列设置为垂直居中。
<div class="row landing-contact-me align-items-center">

wnavrhmk

wnavrhmk2#

在.landing-contact-me div中,您可以删除对齐项和文本对齐。
然后可以使用display:伸缩和对齐-内容:center,以便此div中的元素垂直和水平对齐。
你的css应该看起来像这样:

.landing-contact-me {
  margin-top: 30%;
  margin-right: 25%;
  padding: 3% 2% 3% 2%;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0px 0px 90px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

相关问题