如何在Bootstrap 5联系表单中实现图标与文本垂直对齐？

云上老周

2026-7-16

问题描述

我是Bootstrap 5、CSS和HTML的新手，目前正在用Bootstrap 5搭建网站的联系表单板块，想要添加电话号码和邮箱信息，但没法让文本和图标垂直对齐。期望效果为图标与文本居中对齐、排列整齐。

用户代码

Test.html

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Bootstrap5 contact form</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/contact.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="C:\Users/NewMayoAyo/Documents/_Dev/projects/Bootstrap-/css/contact-form.css">
</head>
<body>

    <!-- CONTACT FORM SECTION START -->
    <section>
        <div class="form-area">
            <div class="container">
                <div class="row single-form g-0">
                    <div class="col-sm-12 col-lg-6">
                        <div class="left">
                            <h2><span>Contact Us for</span> <br>Business Inquiries</h2>
                            <div class="mt-5" >
                            <i class="fa-solid fa-phone fa-2x"></i>
                            <p class="inline">123-456-890</p>
                            <br />
                            <i class="fa-solid fa-envelope fa-2x"></i>
                            <p>example@email.com</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="right">
                        <i class="fa fa-caret-left"></i>
                            <form>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">Your Name</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">Message</label>
                                <textarea type="password" class="form-control" id="exampleInputPassword1"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->
</body>
</html>

Test.css

/* body {
    background: #e8e8e8;
} */
.form-area {
    padding-top: 7%;
}
.row.single-form {
    box-shadow: 0 2px 20px -5px rgba(0,0,0,0.5);
}
.left {
    background: blueviolet;
    padding: 200px 98px;
}
.left h2 {
    font-family: poppins;
    color: #fff;
    font-weight: 700;
    font-size: 48px;
}
.left h2 span {
    font-weight: 100;
}
.single-form{
    background: #fff;
}
.right {
    padding: 70px 100px;
    position: relative;
}
.right i {
    position: absolute;
    font-size: 80px;
    left: -27px;
    top: 40%;
    color: #fff;
}
.form-control {
    border: 2px solid #000;
}
.right button {
    border: none;
    border-radius: 0;
    background: #252525;
    width: 180px;
    color: #fff;
    padding: 15px 0;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
.right button:hover{
    background-color: #252525;
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
    top: -52px;
    transform: rotate(90deg);
    left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
    width: 150px;
    padding: 12px 0;
}
    
}

解决方案

1. 清理冗余依赖

代码中重复引入了多个Bootstrap和Font Awesome版本，会导致样式冲突，保留最新版本即可：

只保留Bootstrap 5.3.0的CSS和JS
只保留Font Awesome 6.4.0的all.min.css
移除本地绝对路径的CSS链接（改用相对路径更合理）

2. 修改HTML结构实现垂直对齐

利用Bootstrap的弹性布局工具类，给每个联系方式单独做容器，实现图标与文本垂直居中：

<div class="mt-5">
  <div class="d-flex align-items-center mb-3">
    <i class="fa-solid fa-phone fa-2x me-3"></i>
    <p class="mb-0">123-456-890</p>
  </div>
  <div class="d-flex align-items-center">
    <i class="fa-solid fa-envelope fa-2x me-3"></i>
    <p class="mb-0">example@email.com</p>
  </div>
</div>

d-flex：将容器转为弹性布局
align-items-center：让容器内元素垂直居中
me-3：给图标右侧添加间距，区分文本
mb-3/mb-0：清除段落默认外边距，避免多余留白

3. 优化CSS（可选）

给左侧区域统一设置文本颜色，避免与背景冲突：

.left {
    background: blueviolet;
    padding: 200px 98px;
    color: #fff; /* 统一文本为白色 */
}

完整修改后代码

HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Bootstrap5 contact form</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/contact.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <!-- CONTACT FORM SECTION START -->
    <section>
        <div class="form-area">
            <div class="container">
                <div class="row single-form g-0">
                    <div class="col-sm-12 col-lg-6">
                        <div class="left">
                            <h2><span>Contact Us for</span> <br>Business Inquiries</h2>
                            <div class="mt-5">
                              <div class="d-flex align-items-center mb-3">
                                <i class="fa-solid fa-phone fa-2x me-3"></i>
                                <p class="mb-0">123-456-890</p>
                              </div>
                              <div class="d-flex align-items-center">
                                <i class="fa-solid fa-envelope fa-2x me-3"></i>
                                <p class="mb-0">example@email.com</p>
                              </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="right">
                        <i class="fa fa-caret-left"></i>
                            <form>
                            <div class="mb-3">
                                <label for="exampleInputName" class="form-label">Your Name</label>
                                <input type="text" class="form-control" id="exampleInputName">
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <label for="exampleMessage" class="form-label">Message</label>
                                <textarea class="form-control" id="exampleMessage"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->
</body>
</html>

CSS

/* body {
    background: #e8e8e8;
} */
.form-area {
    padding-top: 7%;
}
.row.single-form {
    box-shadow: 0 2px 20px -5px rgba(0,0,0,0.5);
}
.left {
    background: blueviolet;
    padding: 200px 98px;
    color: #fff;
}
.left h2 {
    font-family: poppins;
    color: #fff;
    font-weight: 700;
    font-size: 48px;
}
.left h2 span {
    font-weight: 100;
}
.single-form{
    background: #fff;
}
.right {
    padding: 70px 100px;
    position: relative;
}
.right i {
    position: absolute;
    font-size: 80px;
    left: -27px;
    top: 40%;
    color: #fff;
}
.form-control {
    border: 2px solid #000;
}
.right button {
    border: none;
    border-radius: 0;
    background: #252525;
    width: 180px;
    color: #fff;
    padding: 15px 0;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
.right button:hover{
    background-color: #252525;
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
    top: -52px;
    transform: rotate(90deg);
    left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
    width: 150px;
    padding: 12px 0;
}
    
}

内容的提问来源于stack exchange，提问作者PFL

如何在Bootstrap 5联系表单中实现图标与文本垂直对齐？

用户代码 #

Test.html #

Test.css #

1. 清理冗余依赖 #

2. 修改HTML结构实现垂直对齐 #

3. 优化CSS（可选） #

完整修改后代码 #

HTML #

CSS #