在引导程序中将 2 个 DIV 相互对齐答案

【问题标题】：Aligning 2 DIVs on top on each other in bootstrap在引导程序中将 2 个 DIV 相互对齐
【发布时间】：2020-04-14 16:29:47
【问题描述】：

所以我使用引导程序来创建索引主页我想要做的基本上是在中心 2 个 div 上对齐：我有一个容器流体然后一行有 2 个列：在 1 个列中，我有 2 个 div，我想在中心对齐（水平和垂直），（代码如下）

这是一个插图： what I want to do

绿色是容器流体|| 红色和蓝色是我想要对齐的 div ||橙色是我稍后要添加的登录表单

我的代码是这样的：

<div class="container-fluid mainwrapper p-2">
<div class="row">

    <div class="col">

        <div>
           <img src="pictures/logooo.png" class="my-2" alt="uc2">
        </div>

        <div>
           <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
        </div>
    </div>
    <div class="col">

    <!-- Login form here -->

    </div>      
</div>  
</div>

这是问题的真实图片

我希望绿色徽标和带有白色背景的文字在左栏的中心对齐

real problem

what I realy want

【问题讨论】：

标签： html css twitter-bootstrap-3 bootstrap-4

【解决方案1】：

将 text-center 类添加到要居中对齐的 div。如下代码所示

<div class="col">

    <div class="text-center">
    <img src="pictures/logooo.png" class="my-2" alt="uc2">
    </div>

    <div class="text-center">
    <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
    </div>


</div>

这会解决你的问题..

【讨论】：

【解决方案2】：

添加这些步骤：

HTML

<div class="text-center">
  <img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>

css

.col {
  padding-left:50px;
}

【讨论】：

【解决方案3】：

您可以将“col-md-6”赋予 with 列和“text-align:center;” （水平对齐）和“margin：0 auto”。试试这个。

<div class="container-fluid mainwrapper p-2">
<div class="row">

    <div class="col-md-6" style="text-align:center;">

<div style="float: none; margin: 0 auto;">
        <div>
        <img src="pictures/logooo.png" class="my-2" alt="uc2">
        </div>

        <div>
        <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
        </div>

<div>
    </div>



    <div class="col-md-6">

    <!-- Login form here -->

    </div>


</div>  
</div>

【讨论】：