居中CSS六角形

Question

我有居中CSS六邊形的問題。我不確定這是如何完成的，所以如果有人能幫忙，我會很感激。完整的代碼與結果是here。提前致謝。

.container { 
    width: 1000px; 
    line-height: 1.3; 
} 

ol.even { 
    position: relative; 
    left: 5.45455em; 
} 

ol.odd { 
    position: relative; 
    margin-top: -6.5%; 
    margin-bottom: -6.5%; 
} 

.hex { 
    position: relative; 
    margin: 1em auto; 
    width: 6em; 
    height: 10.2em; 
    border-radius: 1em/.5em; 
    background: #74cddb; 
    transform: rotate(-90deg); 
    display: inline-block; 
    margin-right: 4.61538em; 
    transition: all 150ms ease-in-out; 
} 

.hex a { 
    display:block; 
} 

.hex:before, .hex:after { 
    position: absolute; 
    width: inherit; height: inherit; 
    border-radius: inherit; 
    background: inherit; 
    content: ''; 
} 
.hex:before { 
    transform: rotate(60deg); 
} 
.hex:after { 
    transform: rotate(-60deg); 
} 

Answer 1

您可以使用顯示：表格和邊距：自動，因此容器將包裝在內容的寬度上。

您需要UPADTE您的垂直邊距由於容器將不是野生的，你沒設置：

.container { 
 
    display:table;/* shrinks/expands to fit content */ 
 
    margin:auto; 
 
} 
 
ol.even { 
 
    position: relative; 
 
    left: 5.45455em; 
 
} 
 
ol.odd { 
 
    position: relative;/* update below */ 
 
    margin-top: -11%; 
 
    margin-bottom: -11%; 
 
} 
 
.hex { 
 
    position: relative; 
 
    margin: 1em auto; 
 
    width: 6em; 
 
    height: 10.2em; 
 
    border-radius: 1em/.5em; 
 
    background: #74cddb; 
 
    transform: rotate(-90deg); 
 
    display: inline-block; 
 
    margin-right: 4.61538em; 
 
    transition: all 150ms ease-in-out; 
 
} 
 
.hex a { 
 
    display:block; 
 
} 
 
.hex:before { 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    border-radius: inherit; 
 
    background: inherit; 
 
    content:''; 
 
    transform: rotate(60deg); 
 
} 
 
.hex:after { 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    border-radius: inherit; 
 
    background: inherit; 
 
    content:''; 
 
    transform: rotate(-60deg); 
 
} 
 
.hex:hover { 
 
    /* change opacity */ 
 
    opacity: 0.7; 
 
    */ cursor: pointer; 
 
    /* text-shadow: 0 0 10px white; */ 
 
} 
 
.hex > span { 
 
    font-family:'Josefin Sans', sans-serif; 
 
    font-weight: bold; 
 
    margin:0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    line-height: 10.2em; 
 
    transform: rotate(90deg); 
 
    text-align: center; 
 
    z-index: 20; 
 
    color: #fff 
 
} 
 
.hex > span > span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: 1em; 
 
}

<div class="container"> 
 
    <ol class="even"> \t <a href="#"><li class='hex'><span><span>HEXAGON 1</span></span></li></a> 
 
\t <a href="#"><li class='hex'><span>HEXAGON 2</span></li></a> 
 

 
    </ol> 
 
    <ol class="odd"> \t <a href="#"><li class='hex'><span>HEXAGON 3</span></li></a> 
 
\t <a href="#"><li class='hex'><span>HEXAGON 4</span></li></a> 
 
\t <a href="#"><li class='hex'><span>HEXAGON 5</span></li></a> 
 

 
    </ol> 
 
    <ol class="even"> \t <a href="#"><li class='hex'><span>HEXAGON 6</span></li></a> 
 
\t <a href="#"><li class='hex'><span>HEXAGON 7</span></li></a> 
 

 
    </ol> 
 
</div>

如果您在每行添加一個額外的六邊形或使它們需要更新更大，負的垂直邊距https://jsfiddle.net/3t6dkb20/6/

請參閱http://www.w3.org/TR/CSS2/box.html#propdef-margin-top以提醒垂直填充/邊距百分比如何作爲參考CE。

Answer 2

添加一個div包含六邊形：

<div class="container"> 
    <div id="xs"> 
     <ol class="even"> 
      ... 
     </ol> 
    </div> 
</div> 

，並與邊界中心是：汽車在小提琴

#xs{ 
    margin:auto; 
    width:600px; 
} 

更多細節：https://jsfiddle.net/x882ytfo/