时间戳

首页 > 解决方案 > 尝试在大型显示器上水平对齐项目，并使用引导程序在小型显示器上垂直对齐项目

html - 尝试在大型显示器上水平对齐项目，并使用引导程序在小型显示器上垂直对齐项目

问题描述

在大型显示器上：我有一个与 2 个标题水平对齐的图像。在小型显示器上：我正在尝试将标题堆叠在图像下方，垂直对齐。

我怀疑它与边距、弯曲方向、某种类型的对齐属性有关。Idk ..我尝试了很多东西，也许只是不正确的组合。我可能只是脑子放屁什么的。这是代码：

<section>
        <div class="container-md d-lg-flex align-items-center align-middle">
                <img src="images\logo2.png" class="img-adjustment">
                <div class="heading-wrapper">
                        <div class="display-4 montserrat text-nowrap heading-adjustment" style="">
                                Phoenix Master Meters
                        </div>
                        <h5 class="source-sans text-nowrap heading-adjustment">
                                Pipeline Consulting, Inspection, and Maintenance Services
                        </h5>
                </div>
        </div>
</section>

标签： htmlcss

解决方案

您可以实现 Bootstrap Grid，然后它将处理大屏幕和小屏幕的显示。

然后，删除divtext-nowrap内元素中的类。heading-wrapper

这是一个例子

<section>
        <div class="container-md d-lg-flex align-items-center align-middle">
          <div class="row">
            <div class="col-lg-2 col-sm-12">
                <img src="images\logo2.png" class="img-adjustment">
            </div>
            <div class="col-lg-10 col-sm-12">
                <div class="heading-wrapper">
                        <div class="display-4 montserrat heading-adjustment" style="">
                                Phoenix Master Meters
                        </div>
                        <h5 class="source-sans heading-adjustment">
                                Pipeline Consulting, Inspection, and Maintenance Services
                        </h5>
                </div>
            </div>
          </div>


        </div>
</section>

推荐阅读