在自举列中居中六角形。文本中心和边距：0自动;似乎不起作用

Question

我想将六边形置于列中心。我尝试过文本中心和保证金：0自动;同样。它没有集中。我做错了什么？

我试图使用bootstrap行和列来实现此目的。

＆＃13;

＆＃13;

.hexa {
  margin: 0 auto;
}

.hex1 {
  float: left;
  border-right: 50px solid #2c0362;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

.hex2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #2c0362;
}

.hex3 {
  float: left;
  border-left: 50px solid #2c0362;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

.hex-text {
  font-size: 62px;
  color: #fff;
  line-height: 3;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-6 hexa text-center">
    <div class="hex1"></div>
    <div class="hex2">
      <p class="hex-text">Text</p>
    </div>
    <div class="hex3"></div>
  </div>
  <div class="col-lg-6"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display: inline-block;用于.hexa并将其打包到col-lg-6，

如果您使用的是text-align:center，则子元素必须为inline或inline-block。

.hexa {
  display: inline-block;
}

.hex1 {
  float: left;
  border-right: 50px solid #2c0362;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

.hex2 {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #2c0362;
}

.hex3 {
  float: left;
  border-left: 50px solid #2c0362;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

.hex-text {
  font-size: 62px;
  color: #fff;
  line-height: 3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
  <div class="row">
    <div class="col-lg-6 text-center">
      <div class=hexa>
        <div class="hex1"></div>
        <div class="hex2">
          <p class="hex-text">Text</p>
        </div>
        <div class="hex3"></div>
      </div>
    </div>
    <div class="col-lg-6"></div>
  </div>
</div>

Answer 2

只是一个小小的变化。将display:table;添加到.hexa。

它会使元素居中

＆＃13;

＆＃13;

.hexa{
	margin: 0 auto;
  display:table;
}

.hex1{
	float: left;
	border-right: 50px solid #2c0362;
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
}

.hex2{
	float: left;
	width: 200px;
	height: 200px;
	background-color: #2c0362;
}

.hex3{
	float: left;
	border-left: 50px solid #2c0362;
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
}

.hex-text{
	font-size:62px;
	color:#fff;
	line-height:3;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-6 hexa text-center">
    <div class="hex1"></div>
    <div class="hex2"><p class="hex-text">Text</p></div>
    <div class="hex3"></div>
  </div>
  <div class="col-lg-6"></div>
</div>

＆＃13;

＆＃13;

＆＃13;