Question

我想将两个div中心放入另一个div（水平）。有谁可以告诉我我怎么能这样做，在下面的代码中？我希望在div的中间有两个div，类为box-left和box-right，在class的外部：

<html>
<head>
    <style>
        .container{
            background-color: blue;
        }
        .outer{
            text-align: center;
        }
        .width-600{
            width:600px;    
            text-align:left;
            margin-right: auto;
            margin-left: auto;
        }
        .box-left{
            background-color: yellow;
        }
        .box-right{
            background-color: green;
        }
    </style>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="outer">
            <div class="row width-600">
                <div class="col-xs-12 col-md-4">
                    <div class="box-left">left</div>
                </div>
                <div class="col-xs-12 col-md-8">
                    <div class="box-right">right</div>
                </div>
            </div>
        </div>
    </div>
</body> </html>

Answer 1

你可以使用display：flex和justify-content：center on .outer class，将两行居中

检查以下代码段

＆＃13;

.container {
  background-color: blue;
}
.outer {
  display:flex;
  justify-content:center;
}
.width-600 {
  width: 400px;
 
  
}
.box-left {
  background-color: yellow;
}
.box-right {
  background-color: green;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">
  <div class="outer">
    <div class="row ">
      <div class="col-xs-12 col-md-4">
        <div class="box-left">left</div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="box-right">right</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在你的html中替换这个主体，看看它是否适合你..

<body>
    <div class="container">
            <div class="row width-600">
                <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"></div>
                <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
                    <div class="box-left">left</div>
                </div>
                <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
                    <div class="box-right">right</div>
                </div>
                <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
            </div>
        </div>
    </div>
</body>

使用Boostrap 3将中心分成另一个div

2 个答案: