如何在页面上居中包装 - 链接答案

【问题标题】：How to center wrapper on page - links如何在页面上居中包装 - 链接
【发布时间】：2016-05-04 09:08:49
【问题描述】：

我的包装完全位于我的网站中心，但是当我将链接添加到其中的图标时，它们的位置发生了变化。我尝试再次将它们居中，但现在它似乎无法正常工作，因为当我更改缩放或调整页面大小时，它们不再位于中心。

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 看这段代码

【问题讨论】：

垂直居中、水平居中，还是两者兼而有之？
没有负填充之类的东西。

标签： html css center wrapper

【解决方案1】：

我不确定这是否是你想要做的，但我创建了这个JSFiddle，结果可能是你所期望的。

我使用了@Berat Baran Cevik 创建的 HTML，因此它采用了可接受的 HTML 语法（您不应该将块 - 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中，我主要将width属性中的“，”改成了“.”。由于每个 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;
}

【讨论】：

【解决方案2】：

对 HTML 试试这个：

<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：

#facebook a{
TYPE THE CSS
}

对 youtube 和 twitter 也做同样的事情。

【讨论】：