Question

我是html的完整新手。我试图水平居中两个社交媒体图标 - 我必须尝试大约30种不同的代码组合，没有运气。任何帮助将不胜感激 - 谢谢！我确信已经提出了类似的问题，但我无法获得任何解决方案

＆＃13;

a {
  color: #444555;
}

.social-icon-container {
  text-align:center !important;
    
}
    
a.social-icon {
  display: inline-block !important;
  margin:5px 20px;
  padding:5px;
  
}

＆＃13;

<div class="social-icon-container">
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Twitter Logo"> 
             
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Facebook Logo"> 
</div>

＆＃13;

Answer 1

试试这个：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.social-wrapper {
  background: green;
  width: 100%;
  text-align: center;
  font-size: 0;
}
.social {
  display: inline-block;
  margin: 0 auto;
  background: red;
  font-size: 0;
}
.social a {
  display: inline-block;
  margin: 0 5px;
  font-size: auto;
}

＆＃13;

<div class="social-wrapper">
    <div class="social">
        <a href="#"><img src="http://www.placehold.it/32x32" alt="fb"></a>
        <a href="#"><img src="http://www.placehold.it/32x32" alt="tw"></a>
    </div>
</div>

＆＃13;

Answer 2

你拥有的代码似乎很好地集中在他们身上。 See JSFiddle example

但是，您的HTML代码不完整，您尚未关闭img和a代码。

<div class="social-icon-container">
    <a href="URL"><img class="social-icon" src="URL" alt="Twitter Logo" /></a>

    <a href="URL"><img class="social-icon" src="URL" alt="Facebook Logo" /></a> 
</div>

Answer 3

试试这个：对于链接元素

a{
display:inline-block;
 -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

Answer 4

使用此代码，代码简短但很好（并且反应灵敏！）

main {
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<main>
  <aside>
    <a href="#">
      <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" alt="Twitter Icon"></a>
    <a href="#"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" alt="Facebook Icon"></a>
  </aside>
</main>
</body>
</html>

水平居中社交图标

4 个答案: