我的包装器完美地位于我的网站的中心,但是当我将链接添加到其中的图标时,它们的位置发生了变化。我尝试再次将它们居中,但现在似乎效果不佳,因为当我更改缩放或调整页面大小时,它们不再位于中心。
HTML
<div class="wrappericons">
<a href="http://www.facebook.com"><div id="facebook"></div></a>
<a href="http://www.youtube.com"><div id="youtube"></div></a>
<a href="http://www.twitter.com"><div id="twitter"></div></a>
</div>
还有 CSS
.wrappericons {
margin: auto;
width: 15%;
background-color: none;
display: flex;
-webkit-display: flex;
-moz-display: flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
padding-left: -20px;}
#facebook {
height: 60px;
width: 33,33%;
margin-left: 50%;
margin-right: 50%;
background-color: none;
background-image: url(icons/facebookgrey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;}
#facebook:hover {
background-image:url(icons/facebook.svg);}
#youtube {
height: 60px;
width: 33,33%;
margin-left: 75%;
background-color: none;
background-image: url(icons/youtubegrey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;}
#youtube:hover {
background-image:url(icons/youtube.svg);}
#twitter {
height: 60px;
width: 33,33%;
margin-left: 100%;
background-color: none;
background-image: url(icons/twittergrey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;}
#twitter:hover {
background-image:url(icons/twitter.svg);}
PS:我使用 Chrome 来查看此代码
最佳答案
我不确定这是否是您想要做的,但我创建了这个 JSFiddle结果可能就是你所期望的。
我使用了 @Berat Baran Cevik 创建的 HTML,因此它采用可接受的 HTML 语法(您不应该将 block - Div、Sectin 等 - 放在链接标记内)。
<div class="wrappericons">
<span id="facebook"><a href="http://www.facebook.com"></a></span>
<span id="youtube"><a href="http://www.youtube.com"></a></span>
<span id="twitter"><a href="http://www.twitter.com"></a></span>
</div>
在CSS中,我主要将宽度属性中的“,”更改为“。” 由于每个 div 都有自己的宽度,因此不需要指定 margin-left 及其位置,所以我也将其取消。
.wrappericons {
margin: auto;
width: 100%;
background-color: none;
display: flex;
-webkit-display: flex;
-moz-display: flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;}
#facebook {
height: 60px;
width: 33.33%;
background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;
}
#youtube {
height: 60px;
width: 33.33%;
background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;
}
#twitter {
height: 60px;
width: 33.33%;
background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: flex;
-webkit-display: flex;
-moz-display: flex;
min-width: 45px;
float: left;
position: relative;
}
关于html - 如何使包装器在页面上居中 - 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35036965/