Question

我正在尝试使用Twitter Bootstrap 3将col-span-6 div居中到页面中心。不幸的是，我没有任何工作。我使用Firefox开发人员工具来识别问题，最有可能是因为col-span-6类向左浮动。因此，我添加了一个样式=“ float：none！important;”。到col-span-6元素，但是什么也没做。

帮助！

<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

Answer 1

您可以使用CSS将div对齐到页面的中心。遵循CSS对我有用。您可以尝试使用此CSS。

.col-sm-6 {
          position: absolute;
	  margin: auto;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  width: 100px;
	  height: 100px;
	  background-color: #ccc;
	  border-radius: 3px; 
	  text-align: center;
}

<div class="panel-group col-sm-6">
   <div class="panel panel-default">
	 <div class="panel-heading">
            <h5 class="card-title">test</h5>
         </div>
         <div class="panel-body">
            <p class="card-text">test</p>
         </div>
   </div>
</div>

Answer 2

为此，您可以使用display: flex来更轻松地处理对齐方式。我在下面做了一个示例代码。希望对您有帮助

HTML

<div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

CSS

.d-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.h-100 {
  height: 100vh !important;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/

Answer 3

我不确定，但是在我看来您想实现这种效果：

.super-center {
  margin: 0 auto !important;
  float: none !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
    <div class="panel-heading">
        <h5 class="card-title">test</h5>
    </div>
    <div class="panel-body">
        <p class="card-text">test</p>
    </div>
</div>
</div>

添加到您的div中就足够了：margin: 0 auto;

Answer 4

使用带有“ col-sm-6”的列偏移量使其居中。这是一个示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group col-sm-6 col-sm-offset-3">
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h5 class="card-title">test</h5>
	    </div>
	    <div class="panel-body">
	        <p class="card-text">test</p>
	    </div>
	</div>
</div>

它会自动将列推到中心。

引导线与页面中心对齐

4 个答案: