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

添加div以包含六边形：

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

并以margin：auto

为中心

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

小提琴中的更多细节：https://jsfiddle.net/x882ytfo/

Answer 2

您可以使用display：table和margin：auto，因此容器将包含内容的宽度。

您需要更新您的垂直边距，因为容器不会像您设置的那样狂野：

.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">	<a href="#"><li class='hex'><span><span>HEXAGON 1</span></span></li></a>
	<a href="#"><li class='hex'><span>HEXAGON 2</span></li></a>

    </ol>
    <ol class="odd">	<a href="#"><li class='hex'><span>HEXAGON 3</span></li></a>
	<a href="#"><li class='hex'><span>HEXAGON 4</span></li></a>
	<a href="#"><li class='hex'><span>HEXAGON 5</span></li></a>

    </ol>
    <ol class="even">	<a href="#"><li class='hex'><span>HEXAGON 6</span></li></a>
	<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，提醒垂直填充/百分比以宽度为参考。

居中CSS六边形

2 个答案: