Question

当我的网站处于移动浏览器尺寸时，我试图将一块社交图标集中到屏幕中心。我的HTML是：

<div id="header-tel-no">Tel: 123456789</div>

<div id="social-buttons-header">
<p><a class="social-button sb-linkedin" href="http://www.linkedin.com/sample" target="_blank">Linkedin</a></p>

<p><a class="social-button sb-twitter" href="https://twitter.com/sample" target="_blank">Twitter</a></p>

<p><a class="social-button sb-facebook" href="https://www.facebook.com/sample" target="_blank">Facebook</a></p>

<p><a class="social-button sb-email" href="mailto:info@sample.co.uk">Email</a></p>
</div>

我的CSS是： -

#social-buttons-header{

    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;

}

.social-button{

    width: 30px;
    height: 30px;
    text-indent: -999em;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 2px;
    text-decoration: none;
    border: 1px solid #FFFFFF;
}

a.social-button:hover,
.social-button a:hover,
a.social-button:hover:after,
.social-button a:hover:after {

    text-decoration: none;
    border: 1px solid #FF9933;
}


a.social-button.sb-facebook,
.social-button a.sb-facebook {
  background: transparent url(images/facebook.png) no-repeat;

}

a.social-button.sb-twitter,
.social-button a.sb-twitter {
  background: transparent url(images/twitter.png) no-repeat;

}

a.social-button.sb-linkedin,
.social-button a.sb-linkedin {
  background: transparent url(images/linkedin.png) no-repeat;

}

a.social-button.sb-email,
.social-button a.sb-email {
  background: transparent url(images/outlook.png) no-repeat;

}

社交图标就像这样显示在右边......

................. [X] [X] [X] [X]

我想要他们......

........ [x] [x] [x] [x] .........

（我已经使用了上面的括号和x＆＃39; s因为我无法上传照片，因为我的得分不够高）

有人可以建议我如何让他们进入中心吗？

Answer 1

使用提供的代码 - 更新p标记以显示内联块并将标题内容居中

http://jsfiddle.net/vc3tkdq7/

p {
    display: inline-block;
}

#social-buttons-header{
    text-align: center;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;    
}

删除文字

http://jsfiddle.net/xten2c47/1/

我使用了text-indent: 999999px;

Answer 2

检查以下代码

#social-buttons-header {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}
.social-button {
  width: 30px;
  height: 30px;
  text-indent: -999em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 2px;
  text-decoration: none;
  border: 1px solid #FFFFFF;
}
a.social-button:hover,
.social-button a:hover,
a.social-button:hover:after,
.social-button a:hover:after {
  text-decoration: none;
  border: 1px solid #FF9933;
}
a.social-button.sb-facebook,
.social-button a.sb-facebook {
  background: transparent url(images/facebook.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-twitter,
.social-button a.sb-twitter {
  background: transparent url(images/twitter.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-linkedin,
.social-button a.sb-linkedin {
  background: transparent url(images/linkedin.png) no-repeat;
  border: 1px solid black;
}
a.social-button.sb-email,
.social-button a.sb-email {
  background: transparent url(images/outlook.png) no-repeat;
  border: 1px solid black;
}

<div id="header-tel-no">Tel: 123456789</div>
<div id="social-buttons-header">
  <p><a class="social-button sb-linkedin" href="http://www.linkedin.com/sample" target="_blank">Linkedin</a><a class="social-button sb-twitter" href="https://twitter.com/sample" target="_blank">Twitter</a><a class="social-button sb-facebook" href="https://www.facebook.com/sample"
    target="_blank">Facebook</a><a class="social-button sb-email" href="mailto:info@sample.co.uk">Email</a>
  </p>
</div>

Fiddle Demo

如何围绕社交图标背景图像块？

2 个答案: