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

时间：2018-06-11 17:38:58

标签： html css html5 twitter-bootstrap css3

我有一个JavaScript脚本，在点击前两个框时基本上隐藏了一个框。单击顶部的其中一个框后，底部的其中一个框隐藏。如何让底部的两个盒子保持居中？

以下是着陆页：

Diagram 1

一旦隐藏了一个方框，我希望底部的div居中。我希望在隐藏另一个框之后将SharePoint和Teams框置于中心位置。

Diagram 2

改变后的两个div的中心^

代码：

＆＃13;
＆＃13; 
.margin-bottom-20 { 
	margin-bottom: 20px; 
}

.collabProjects:hover, .collabFiles:hover, .collabSocially:hover {
  box-shadow: 0 0 15px rgba(33,3,3,.2); 
}

.decisionTreeBox {
	background-color: #4B92DB;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	transition: box-shadow .3s;
}

#decisionTreeOneDrive {
	background-color: #094AB2;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}


#decisionTreeSharePoint {
	background-color: #008CE7;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeTeams {
	background-color: #4A1EBD;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#innerBoxHeadings {
	color: white!important; 
	text-align: center; 
	padding-top: 5px;
}

#columnMiddleBorderLeft, #pageTitle {
	display:none!important;
}
＆＃13; 
<div class="outer-container">
  <div class="row">
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;">
        Share and Collaborate</div>
    </div>
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;">
        Share Externally</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row">
      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
          </div>
        </div>
      </a>
       <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script>
   function projectCollab() {
   		var divsToCange = document.querySelectorAll('[data-decision]'),
   			attr = this.getAttribute('data-collaborate');
   
   		for (var i = 0; i < divsToCange.length; i++) {
   			var d = divsToCange[i];
   
   		if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */
   			d.parentNode.style.display = 'block';
   		} else {
   			d.parentNode.style.display = 'none';
   			}
   		}
   		return false;
   		}
   
   		var divButtons = document.querySelectorAll('[data-collaborate]');
   
   		for (var i = 0; i < divButtons.length; i++) {
   			divButtons[i].addEventListener('click', projectCollab);
   }
</script>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

有一种旧技术可以使父母的内容居中，然后让孩子display: inline-block;。您将不得不考虑白色空格“”角色的可见性 - 但这已经很好地记录了（例如Remove Whitespace Between Inline-Block Elements）。您必须使用边距来恢复间距，并且在恢复元素时，请记住更改JS以反映inline-block而不是block。

为了选择器的健全性，我在代码演示中为包含row元素添加了一个示例类。

<强> HTML 

<div class="row centered-buttons">

<强> CSS 

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

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


.margin-bottom-20 {
  margin-bottom: 20px;
}

.collabProjects:hover,
.collabFiles:hover,
.collabSocially:hover {
  box-shadow: 0 0 15px rgba(33, 3, 3, .2);
}

.decisionTreeBox {
  background-color: #4B92DB;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s;
}

#decisionTreeOneDrive {
  background-color: #094AB2;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#innerBoxHeadings {
  color: white!important;
  text-align: center;
  padding-top: 5px;
}

#columnMiddleBorderLeft,
#pageTitle {
  display: none!important;
}

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

.centered-buttons a {
  display: inline-block;
  vertical-align: middle;
}
<div class="outer-container">
  <div class="row">
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;">
        Share and Collaborate</div>
    </div>
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;">
        Share Externally</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row centered-buttons">
      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script>
  function projectCollab() {
    var divsToCange = document.querySelectorAll('[data-decision]'),
      attr = this.getAttribute('data-collaborate');

    for (var i = 0; i < divsToCange.length; i++) {
      var d = divsToCange[i];

      if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */
        d.parentNode.style.display = 'block';
      } else {
        d.parentNode.style.display = 'none';
      }
    }
    return false;
  }

  var divButtons = document.querySelectorAll('[data-collaborate]');

  for (var i = 0; i < divButtons.length; i++) {
    divButtons[i].addEventListener('click', projectCollab);
  }
</script>

答案 1 :(得分：2)

在这种情况下，我通常会有条件地设置内容的类别，这取决于存在多少项目。例如，假设您正在检查名为items的数组，该数组的长度为2或3个项。这是一些伪代码，告诉你我在想什么。

let itemsClass;

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

myElement.setClass(itemsClass);

您可以设置一个点击处理程序，在您单击按钮或其他任何内容后进行检查。在反应中，这可能是您的组件render()方法的一部分。

我不知道你为JS使用了什么，所以我不会尝试为你编写代码。但它的要点是，使用JS动态决定类名，并将其应用于您的元素。

修改：抱歉，我没有阅读您的整个代码段。这是您可以添加到已有的处理程序中的内容。你只需要抓住元素并在那时改变类。

答案 2 :(得分：1)

您要求的内容是BS内置的。但是你通过在不应该的地方添加html来混淆框架。特别是使用锚标记包装BS cols，这会破坏BS网格系统，特别是规定只有cols可以是行的子节点。

为了简单起见，我使你的html显着缩短，并且稍微改变你的js来展示隐藏部分。我希望这是一个可以扩展的好例子。

FIXES：

  • 我已将锚标签移动到col中。这打破了BS网格的对齐，也是BS网格系统的错误标记。
  • 我改变了你的JS以隐藏col，而不是锚。这允许BS弹性网格正确地进行对齐
  • 在javascript中，请考虑向您的标记添加属性，这样您就不必导航正确数量的父级别。按照目前的情况，如果你向col html添加更多图层，你的JS就会破坏。

＆＃13;
＆＃13; 
function projectCollab() {
  var divsToChange = document.querySelectorAll('[data-decision]'),
    attr = this.getAttribute('data-collaborate');

  for (var i = 0; i < divsToChange.length; i++) {
    var d = divsToChange[i];
    d.parentNode.parentNode.hidden = ! d.getAttribute('data-decision').includes(attr);
  }
  return false;
}

var divButtons = document.querySelectorAll('[data-collaborate]');

for (var i = 0; i < divButtons.length; i++) {
  divButtons[i].addEventListener('click', projectCollab);
}
＆＃13; 
.collabProjects:hover,
.collabFiles:hover,
.collabSocially:hover {
  box-shadow: 0 0 15px rgba(33, 3, 3, .2);
}

div[data-decision],
div[data-collaborate]{
  color: white;
  width: 200px;
  height: 100px;
}

.decisionTreeBox {
  background-color: #4B92DB;
}


#decisionTreeOneDrive {
  background-color: #094AB2;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
}
＆＃13; 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="outer-container">
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-4">
      <div data-collaborate="shareCollab" class="decisionTreeBox">
        Share and Collaborate</div>
    </div>
    <div class="col-4">
      <div data-collaborate="shareExternally" class="decisionTreeBox">
        Share Externally</div>
    </div>
  </div>
  <hr />
    <div class="row justify-content-center">
      <div class="col-4">
        <a href="#">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings">OneDrive</h3>
          </div>
        </a>
      </div>
      <div class="col-4">
        <a href="#">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings">SharePoint</h3>
          </div>
        </a>
      </div>
      <div class="col-4">
        <a href="#">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings">Teams</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

将以下CSS添加到row类：

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

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

相关问题
最新问题