Question

编辑：现在全部排序。感谢所有帮助过的人！：）

我无法集中我的网站元素。将3个div混合在一起形成六边形。

我无法集中注意力。

HTML：

<li>
    <div class="centerhex">
        <a href="#">
          <div class="hexa">
            <div class="hexcontainer">
              <div class="vertical-align">
                <span class="hextext">Lorem Ipsum Dolor</span>
              </div>
            </div>
          </div>
        </a>
    </div>
</li>

CSS：

.centerhex {
left: 50%;
margin: 0 auto;
width:210px;
height:300px;
}

.hexa {
width: 100%;
min-width: 200px;
height: 0;
padding-bottom: 57.7%;
margin-top: 65px;
background-color: #4a4a4a;
/*position: absolute;*/
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 18px;
border-radius: 4%/20%;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.hexa::before,
.hexa::after {
content:"";
display: block;
width: inherit;
height: inherit;
padding: inherit;
background: inherit;
z-index: 0;
position: absolute;
border-radius: inherit;
-moz-transform:rotate(60deg);  
-webkit-transform:rotate(60deg);  
-o-transform:rotate(60deg);  
-ms-transform:rotate(60deg);
}

.hexa::after {
-moz-transform:rotate(-60deg);  
-webkit-transform:rotate(-60deg);  
-o-transform:rotate(-60deg);  
-ms-transform:rotate(-60deg);
}

.hexcontainer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 10;
}


.vertical-align {
display: table;
height: 100%;
width: 100%;
}

另外，我需要帮助，因此形状的底部不会被切断。网址：http://jackmarshallphotography.co.uk/V1/donate.html

Answer 1

您的css中有很多内容需要更改，我使用Chrome开发人员工具直接在您的网站上工作，请在下面的css中找到“标记”的中心位置：

.servicebox {
position: absolute;
margin-top: -77px;
width: 100%;
}

.servicebox ul {
list-style: none;
width: 100%;
text-align: center;
}

.servicebox ul li {
margin-left: 12px;
}

.centerhex {
margin: auto;
width: 210px;
height: 300px;
}

希望它有所帮助。

关于第二个问题：

你需要编辑文件hexagon.css并更改margin-top属性找到正确的值：-65px或更多（第47行）

的Yoann

Answer 2

让我看看我能用一个简单的例子来帮助你。

有一个小提琴 - fiddle link！

编辑！ - 这是另一个没有绝对定位的小提琴......似乎可以在没有它的情况下实现 - fiddle link - no absolute positioning

绝对定位示例：

HTML

<div id="parentOfCentered">
    <div id="perfectlyCentered"></div>
</div>

CSS

#parentOfCentered {
    position: relative; /*  Absolutely positioned children will be positioned in relation to the parent div */
    background: #CCC;
    width: 400px;
    height: 400px;
}
#perfectlyCentered {
    width: 200px;
    height: 200px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px; 
   /*  
       - negative top margin of half the height
       - negative left margin of half the width
   */
}

中心组合div

2 个答案: