Question

首先，我将两个div放在另一个div的中心，一切都很好。我现在的另一个要求是，当隐藏在第一个div旁边的第二个div时，自动居中第一个div：如果我隐藏了我的其他div，那么第一个div应自动在中心对齐。

问题是它没有自动调整到中心。有什么方法可以解决这个问题吗？

这是我的HTML代码。

<div class="row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-6" style="height:35%;background-color:red;width:35%;;margin-left:15%;margin-right:auto;">
  <label>First div</label>
</div>

<div class="col-md-6" style="height:35%;background-color:yellow;width:35%;margin-left:5%;" >
    <label>Second div</label>
</div>

Answer 1

我同意KK，但请确保删除bootstrap添加的浮动：

.row div{
    float:none;
}

http://jsfiddle.net/GCu2D/721/

Answer 2

试试这个我给了一个纯粹的bootstrap解决方案 http://www.bootply.com/fVdBLnSZI4

此处输出更多详细信息：http://output.jsbin.com/fezat/101

Answer 3

您必须动态地将非消失div的类更改为col-md-12

Answer 4

修改你的css：

html, body {
    margin:0;
    padding:0;
}
.row {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.row .col-md-6:first-child {
    height:35%;
    background-color:red;
    width:35%;
    display:inline-block;
}
.row .col-md-6:last-child {
    height:35%;
    background-color:yellow;
    width:35%;
    display:inline-block;
}

要隐藏，只需使用display:none

演示：http://jsfiddle.net/GCu2D/717/

Answer 5

应该做以下

＆＃13;

$(document).ready(function() {

  if ($("#a").css("display") == 'none') {
    $("#b").addClass("a1");

  }
})

＆＃13;

.a1 {
  margin: 0% 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a" style="display:none;">
  abc
</div>
<div id="b">
  xyz
</div>

＆＃13;

Answer 6

您需要动态删除“col-md-6”并将margin:0 auto添加到第二个div的css中。这是fiddle。

Answer 7

看到这个小提琴 Fiddle

.parent {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border: 3px solid black;
    width: 200px;
    height: 200px;
}
.first_div {
    height:35%;
    border: 3px solid green ;
    width:35%;
    display:inline-block;
    margin-top: 20%;
}
.second_div {
    height:35%;
    border: 3px solid red;
    width:35%;
    display:inline-block;
    margin-top: 20%;
}

Answer 8

试试这个

http://jsfiddle.net/Ashu2990/kv99no1g/

HTML

<div id="a"  class="css">A</div>
<div id="b" class="css">B</div>
</br>
<button id="hideDiv">Hide</button>

CSS

.css{
width:50%; 
height:100px; 
float:left; 
display:inline-block;
text-align: center;
}

.css1{
    width:50%; 
    height:100px; 
    margin: 0 auto;
    text-align: center;
}

的javascript

$("#hideDiv").click(function(){
    $("#b").hide();
       console.log($("#b"));
        $('#a').removeClass("css").addClass("css1");
});

Answer 9

你可以实现那个＆＃34;没有＆＃34; JS（只能使div消失） display:flex;会自动将内容重新定位到中心。

＆＃13;

$('.container > div').on('click', function() {
  $(this).fadeOut();
});

＆＃13;

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container > div {
  align-self: center;
  text-align: center;
  background-color: yellow;
  width: 50%;
}
.container > div:first-child {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>1</div>
  <div>2</div>
</div>

＆＃13;

当隐藏另一个div时，如何自动居中div

9 个答案: