Html 将同一行中的两个div居中对齐

我有一个JavaScript脚本，它在单击顶部的两个框时基本上隐藏了一个框。单击顶部的一个框后，底部的一个框将隐藏。如何使底部的两个盒子居中

这是登录页：

我想在底部的div居中，一旦一个盒子被隐藏。我希望在另一个框隐藏后，SharePoint和Teams框居中

更换后，将底部的两个div居中^

代码：

.margin-bottom-20{
边缘底部：20px；
}
.collabProjects:hover、.collabFiles:hover、.collabProjects:hover{
盒影：0.15像素rgba（33,3,3,2）；
}
.decisionTreeBox{
背景色：#4B92DB；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：盒影。3s；
}
#决策树驱动{
背景色：#094AB2；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#决策树共享点{
背景色：#008CE7；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#决策树{
背景色：#4A1EBD；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内箱标题{
颜色：白色！重要；
文本对齐：居中；
垫面：5px；
}
#左栏，#页面标题{
显示：无！重要；
}

共享和协作
对外分享

函数projectCollab（）{
var divsToCange=document.querySelectorAll（“[data decision]”），
attr=this.getAttribute（'data-collaborate'）；
对于（变量i=0；i

将以下CSS添加到

行

类中：

<div class="container" style="padding: 0px;">
<div class="row" style="justify-content: center">

---

由于bootstrap使用flexbox系统，这应该适合您。

在这种情况下，我通常会有条件地设置内容的类别，该类别根据存在的项目数量而变化。例如，假设您正在检查一个名为

items

的数组，该数组的长度为

2

或

3

项。下面是一些pseudocode向你展示了我的想法

let itemsClass;

if (items.length === 2) {
    itemsClass = 'col-md-6';
} else {
    itemsClass = 'col-md-4';
}

myElement.setClass(itemsClass);

您可以设置一个单击处理程序，该处理程序将在您单击按钮或任何东西后进行检查。在react中，该处理程序可能是组件

render（）

方法的一部分

我不知道你在用什么来编写JS，所以我不会尝试为你编写代码。但要点是，用JS动态确定类名，并将其应用到元素中

---

编辑：很抱歉，我没有阅读您的整个代码片段。这是您可以添加到现有处理程序中的内容。您只需获取元素并更改当时的类。

有一种旧技术，将父级内容居中，然后使子级

显示：inline block；

我必须考虑空白“”字符的可见性，但这是有很好的文档记录的（例如）。您必须使用边距来恢复间距，并记住在恢复元素时更改JS以反映

内联块

，而不是

块

为了保持选择器的健全性，我在代码演示中的containing

行

元素中添加了一个示例类

HTML

<div class="row centered-buttons">

.margin-bottom-20{
边缘底部：20px；
}
.合作项目：悬停，
.collabFiles:悬停，
.悬停{
盒影：0 15像素rgba（33,3,3,2）；
}
.decisionTreeBox{
背景色：#4B92DB；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：盒影。3s；
}
#决策树驱动{
背景色：#094AB2；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#决策树共享点{
背景色：#008CE7；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#决策树{
背景色：#4A1EBD；
颜色：白色；
宽度：300px；
高度：140像素；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#内箱标题{
颜色：白色！重要；
文本对齐：居中；
垫面：5px；
}
#左列，
#页面标题{
显示：无！重要；
}
.居中按钮{
文本对齐：居中；
}
.居中按钮a{
显示：内联块；
垂直对齐：中间对齐；
}

共享和协作
对外分享

函数projectCollab（）{
var divsToCange=document.querySelectorAll（“[data decision]”），
attr=this.getAttribute（'data-collaborate'）；
对于（变量i=0；i

您所要求的是内置在BS中的。但是

.centered-buttons {
    text-align: center;
}

.centered-buttons a {
    display: inline-block;
    vertical-align: middle;
}