他のDiv内のDivシェイプの中央揃え

Question

私は4個のdivを並べて設定しようとしていますが、それぞれの中に最初のdiv内に中心を置く小さなdiv六角形があります。内部の形状は、六角形を作成する2つの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は、水平方向に六角形を中央に配置します。以下の例を参照してください（フルスクリーンモード）。

CSSとの位置合わせの例についてはw3schools、センタリングガイドの場合はCSS-tricksを参照してください。あなたは、六角箱の周りにコンテナを追加し、100％に幅を設定し、マージンを追加する必要が

.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

：50％自動; 16進ボックス自体に。私がリンクしている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 */ 
} 

.centered要素はまた固定幅を必要とします（固定されていれば、どんな種類の幅でも設定できます） それは役に立ちます。ここ

は、同様に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>

、内側のdiv使用マージンのため