ブートストラップ列の中に六角形を中心に配置します。テキストセンターとマージン：0 auto;

Question

六角形を中心にしたいと思っています。私はテキストセンターとマージンを試しました：0 auto;同じように。それは集中していません。私は間違っているの？

私はブートストラップの行と列を使用してこれを達成しようとしています。

.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; 
 
}

<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>

Answer 1

使用display: inline-block;を中心とcol-lg-6にそれをラップし、

ます。

.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を追加します。

それはあなたがtext-align:centerを使用している場合は、子要素がinlineまたはinline-blockでなければならない要素.hexaへ

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

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

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

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

 
.hex-text{ 
 
\t font-size:62px; 
 
\t color:#fff; 
 
\t 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="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>