使用Bootstrap 5实现搜索标题、输入框及按钮的居中对齐

架构老林

2026-7-8

解决方案

以下是调整后的代码，可实现你需要的居中对齐和间距效果：

<div class="backgroundWhite">
    <div class="row">
        <div class="col-md-5 mx-auto">
            <!-- 公司名称添加text-center实现文字居中 -->
            <h3 class="mt-lg-5 text-center">Company Name</h3>
            <div class="input-group">
                <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search for your organization" id="example-search-input">
                <span class="input-group-append">
                    <button class="btn rounded-pill border-0 ms-n5" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
            <!-- 用flex容器包裹按钮，实现居中并添加间距 -->
            <div class="d-flex justify-content-center gap-3 mt-3">
                <a asp-page="Detail" class="btn btn-success mr-1 mb-2 w-25">
                    Players
                </a>
                <a asp-page="../Checkout/Index" class="btn btn-checkout mr-1 mb-2 w-25">
                    Organizers
                </a>
            </div>
        </div>
    </div>
</div>

关键修改说明：

给<h3>替换为text-center类：align-content-center是flex容器的布局属性，不适用于文本元素，text-center可直接实现文字水平居中。
新增带d-flex justify-content-center gap-3的div包裹按钮：
- d-flex将容器设为flex布局，justify-content-center让按钮在容器内水平居中。
- gap-3控制按钮之间的间距，可根据需求换成gap-2/gap-4等调整大小。
移除父容器的align-content-center：该属性在此场景下无实际作用，无需保留。