Центрируйте шестиугольную форму в колонке бутстрапа. Текстовый центр и маржа: 0 авто; не работает

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; для .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.

Это будет центрировать элемент

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