html - 使用 Bootstrap 在一排类(class)中只获得一个分区中心

Question

我的网页中有一个类(class)行，在那个类(class)我有一个部门，但我想在中心显示该部门，但我无法做到这一点。 这是我的简单行类。

      <div class="row">
      <div id="left" class="col-md-6">
       <div id="leftin" class="col-md-6"></div>
       </div>
    <div id="right" class="col-md-6"></div>
    </div>

和我的CSS

 #left
{

 height: 150px;
}
#leftin
{
 background: url(news_image_04.jpg) no-repeat;
 background-size: 100% 100%;
 height: 150px;
 margin: 0 auto;
 }
#right
{
  background: url("news_image_03.jpg") no-repeat;
  background-size: 100% 100%;
  height: 150px;
 }

我想在左分区下居中左分区

Answer 1

只是让 float 不是这样。

#leftin {
  background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
  border: 1px solid black;
  float: none; /* make the float none */
  height: 150px;
  margin: 0 auto;
}

 #left
{

 height: 150px;
 border:1px solid red;
}
#leftin {
  background: rgba(0, 0, 0, 0) url("news_image_04.jpg") no-repeat scroll 0 0 / 100% 100%;
  border: 1px solid black;
  float: none; /* make the float none */
  height: 150px;
  margin: 0 auto;
}


#right
{
  background: url("news_image_03.jpg") no-repeat;
  background-size: 100% 100%;
  height: 150px;
   border:1px solid purple;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
      <div id="left" class="col-md-6">
       <div id="leftin" class="col-md-6"></div>
       </div>
    <div id="right" class="col-md-6"></div>
    </div>