在另一個分區中居中Div形狀

Question

我試圖設置4個div並排放置，其中每個都是一個較小的div六角形形狀，我希望以第一個div爲中心。裏面的形狀有點複雜，因爲它由幾個創建六角形的div組成。我似乎無法完全擺脫這一邊緣。

我正在使用zurb基礎框架 任何幫助將不勝感激。

感謝 螞蟻

http://codepen.io/Hornetant/pen/akrgaN?editors=1010

#one { 
 
    height: 500px; 
 
    background-color: red; 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
#two { 
 
    height: 500px; 
 
    background-color: blue; 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
#three { 
 
    height: 500px; 
 
    background-color: green; 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
#four { 
 
    height: 500px; 
 
    background-color: orange; 
 
    float: left; 
 
    padding: 0px; 
 
} 
 
.hextext { 
 
    padding: 10px 20px 10px 20px; 
 
    color: #ffffff; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 100%; 
 
    text-align: center; 
 
} 
 
.hexagongreen { 
 
    position: relative; 
 
    width: 150px; 
 
    background-color: #1aa07d; 
 
    margin-top: 60px; 
 
} 
 
.hexagongreen:before, 
 
.hexagongreen:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 75px solid transparent; 
 
    border-right: 75px solid transparent; 
 
} 
 
.hexagongreen:before { 
 
    bottom: 100%; 
 
    border-bottom: 40px solid #1aa07d; 
 
} 
 
.hexagongreen:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 40px solid #1aa07d; 
 
}

<div class="row"> 
 
    <div class="medium-3 columns" id="one"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="two"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="three"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="four"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

清除浮在你的六邊形文字和中心保證金自動在左，右，像這樣：

.hextext{ 
    padding:10px 20px 10px 20px; 
    color:#ffffff; 
    font-family: 'Droid Sans', sans-serif; 
    font-weight: 400; 
    font-size: 100%; 
    text-align: center; 
    float: none; 
} 



.hexagongreen { 
    position: relative; 
    width: 150px; 
    background-color: #1aa07d; 
    margin-top:60px; 
    margin: 60px auto 0; 
} 

Answer 2

您可以使用margin: 60px auto;。左/右邊距的值auto水平居中六邊形。看下面的例子（全屏模式）。

另請參閱w3schools瞭解與CSS對齊的一些示例或CSS-tricks用於居中指南。

.columns { 
 
    float: left; 
 
    padding: 0px; 
 
    height: 500px; 
 
    width: 25%; 
 
} 
 
#one { 
 
    background-color: red; 
 
} 
 
#two { 
 
    background-color: blue; 
 
} 
 
#three { 
 
    background-color: green; 
 
} 
 
#four { 
 
    background-color: orange; 
 
} 
 
.hextext { 
 
    padding: 10px 20px 10px 20px; 
 
    color: #ffffff; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 100%; 
 
    text-align: center; 
 
} 
 
.hexagongreen { 
 
    position: relative; 
 
    width: 150px; 
 
    background-color: #1aa07d; 
 
    margin: 60px auto; 
 
} 
 
.hexagongreen:before, 
 
.hexagongreen:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 75px solid transparent; 
 
    border-right: 75px solid transparent; 
 
} 
 
.hexagongreen:before { 
 
    bottom: 100%; 
 
    border-bottom: 40px solid #1aa07d; 
 
} 
 
.hexagongreen:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 40px solid #1aa07d; 
 
}

<div class="row"> 
 
    <div class="medium-3 columns" id="one"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="two"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="three"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
    <div class="medium-3 columns" id="four"> 
 
    <div class="hexagongreen"> 
 
     <div class="hextext"><b>DID YOU KNOW?</b> 
 
     <br>Hayfever affects 15 million people in the UK 
 
     <br>each year</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您需要添加一個容器圍繞六邊形框和寬度設置爲100％，然後添加利潤率：50％的汽車;到六角盒本身。您可以在我已鏈接的CodePen.io示例中看到一個工作示例。

HTML

 <div class="medium-3 columns" id="one"> 
     <div class="hexagon-container"> 
      <div class="hexagongreen hexagon-center"> 
       <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div> 
      </div> 
     </div> 
    </div> 

CSS

.hexagon-container { 
    width: 100%; 
} 

.hexagon-center { 
    margin: 50% auto; 
} 

CodePen Example

Answer 4

這裏是內另一箇中心的元素的代碼：

/* center positioning */ 
/* first, you need a wrapper for that element to center it vertically within your parrent element */ 
.centered-wrapper{ 
    position:absolute; 
    top:50%; 
    transform:translateY(-50%); 
    z-index:1; 
    width:100%; 
} 
/* this is the element to be centered, here you are centering it horizontally */ 
.centered{ 
    margin:0 auto; 
    float:none; 
    padding-left:5%; /* you might not need this padding, it depends on how the rest of your css is set up */ 
} 

的3210元素也需要一個固定的寬度（固定的意思是任何一種設置寬度，px,%，不管） 就是這樣，希望它有幫助。

這裏的一對plunkr的例子還有： https://plnkr.co/edit/a0lruDZV1OpvsAtjaOEQ?p=preview

這裏是爲您的具體問題的解決方案，在您的codepen運行這個，看看它是否是你在找什麼：

HTML：

<div class="row"> 
    <div class="medium-3 columns" id="one"> 
    <div class="centered-wrapper"> 
     <div class="hexagongreen centered"> 
     <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div> 
     </div> 
    </div> 
    </div> 


<div class="medium-3 columns" id="two"> 
    <div class="centered-wrapper"> 
    <div class="hexagongreen centered"> 
     <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div> 
    </div> 
    </div> 
</div> 
<div class="medium-3 columns" id="three"> 
    <div class="centered-wrapper"> 
    <div class="hexagongreen centered"> 
     <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div> 
    </div> 
    </div> 
</div> 
<div class="medium-3 columns" id="four"> 
    <div class="centered-wrapper"> 
    <div class="hexagongreen centered"> 
     <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div> 
    </div> 
    </div> 
</div> 
</div> 

CSS：

.columns{ 
    position:relative; 
} 

.centered-wrapper { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-68%); 
    z-index: 1; 
    width: 100%; 
} 


/* this is the element to be centered, here you are centering it horizontally */ 

.centered { 
    margin: 0 auto; 
    float: none; 
    background-color: green; /* i have collored the divs to make it more clear what it's happening */ 
} 
#one{ 
    height:500px; 
    background-color:red; 
float:left; 
    padding:0px; 
} 
#two{ 
height:500px; 
    background-color:blue; 
float:left; 
    padding:0px; 
} 
#three{ 
height:500px; 
    background-color:green; 
float:left; 
    padding:0px; 
} 
#four{ 
height:500px; 
    background-color:orange; 
    float:left; 
    padding:0px; 
} 

.hextext{ 
    padding:10px 20px 10px 20px; 
    color:#ffffff; 
font-family: 'Droid Sans', sans-serif; 
    font-weight: 400; 
    font-size: 100%; 
    text-align: center; 
} 

.hexagongreen { 
    position: relative; 
    width: 150px; 
    background-color: #1aa07d; 
margin-top:60px; 
} 

.hexagongreen:before, 
.hexagongreen:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    border-left: 75px solid transparent; 
    border-right: 75px solid transparent; 
} 

.hexagongreen:before { 
    bottom: 100%; 
    border-bottom: 40px solid #1aa07d; 
} 

.hexagongreen:after { 
    top: 100%; 
    width: 0; 
    border-top: 40px solid #1aa07d; 
} 

Answer 5

.hexagongreen{ 
    margin: 60px auto; 
} 

#one{ 
 
    height:500px; 
 
    background-color:red; 
 
float:left; 
 
    padding:0px; 
 
} 
 
#two{ 
 
height:500px; 
 
    background-color:blue; 
 
float:left; 
 
    padding:0px; 
 
} 
 
#three{ 
 
height:500px; 
 
    background-color:green; 
 
float:left; 
 
    padding:0px; 
 
} 
 
#four{ 
 
height:500px; 
 
    background-color:orange; 
 
    float:left; 
 
    padding:0px; 
 
} 
 

 
.hextext{ 
 
    padding:10px 20px 10px 20px; 
 
    color:#ffffff; 
 
font-family: 'Droid Sans', sans-serif; 
 
    font-weight: 400; 
 
    font-size: 100%; 
 
    text-align: center; 
 
} 
 

 
.hexagongreen { 
 
    position: relative; 
 
    width: 150px; 
 
    background-color: #1aa07d; 
 
margin-top:60px; 
 
} 
 

 
.hexagongreen:before, 
 
.hexagongreen:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    border-left: 75px solid transparent; 
 
    border-right: 75px solid transparent; 
 
} 
 

 
.hexagongreen:before { 
 
    bottom: 100%; 
 
    border-bottom: 40px solid #1aa07d; 
 
} 
 

 
.hexagongreen:after { 
 
    top: 100%; 
 
    width: 0; 
 
    border-top: 40px solid #1aa07d; 
 
}

<div class="row"> 
 
    <div class="medium-3 columns" id="one"> 
 
     <div class="hexagongreen"> 
 
    <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div></div></div> 
 

 

 
<div class="medium-3 columns" id="two"> <div class="hexagongreen"> 
 
    <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div></div></div> 
 
<div class="medium-3 columns" id="three"> <div class="hexagongreen"> 
 
    <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div></div></div> 
 
<div class="medium-3 columns" id="four"> <div class="hexagongreen"> 
 
    <div class="hextext"><b>DID YOU KNOW?</b><br>Hayfever affects 15 million people in the UK <br>each year</div></div></div> 
 
</div>