如何将文本和社交媒体图标放在同一行答案

【问题标题】：How to position text and social media icons on same line如何将文本和社交媒体图标放在同一行
【发布时间】：2018-03-07 11:19:25
【问题描述】：

我正在尝试在我的单页网站页脚的某些文本的任一侧对齐 x2 社交媒体图标。

这是我希望它如何在桌面/宽屏幕上显示的示例。Desktop/Wide Screens

这是我希望它如何在移动/窄屏幕上显示的示例。 Mobile/Narrower Screens

我在下面输入了我到目前为止的代码（目前没有社交媒体图标）

附：我的社交媒体图标保存为 facebook.png 和 twitter.png

body {
    background-color: #000;
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
    font-size: 250%;
    font-weight: 300;
}

.logo {
    display: block;
    margin: 50px auto;
}


p {
    color: #ccc;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.coming-soon {
    color: #333;
    letter-spacing: 3px;
}

.autumn-2017 {
    color: #ccc; 
}

section p {
    display: block;
    margin: 50px auto 10px;
    font-size: 35%;
    text-transform: none;
    letter-spacing: 3px;
    line-height: 25px;
    color: #333;
}

.contact-info {
    margin: 15px auto;
    letter-spacing: 3px;
    line-height: 25px;
    color: #ccc;
    text-decoration: none;
    text-transform: none;
    font-size: 35%;
}

a:link, 
a:visited {
    text-decoration: none;
    color: #ccc;
    transition: font-weight 0.2s;
}

a:hover, 
a:active {
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
}

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="desctription" content="Web Design & Development">
        
        <link rel="stylesheet" type="text/css" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="grid.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="queries.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet">
  
        <meta name="msapplication-config" content="resources/favicons/browserconfig.xml">
        
    </head>
    <body>
        <header>
            
            <div>
                <img src="iz-icon-logo.png" class="logo" alt="logo">
                <p><span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span></p>
            </div>
            
        </header>
        <section>
            <div>
                <p>If you have a Web Design or Development enquiry,<br>please contact:</p>
                <p class="contact-info"><a href="mailto:webmaster@example.com">hello@illusionzero.co.uk</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p>
            </div>
            
        </section> 
    </body>
</html>

【问题讨论】：

您能否添加您的代码，以便我们查看您目前尝试过的内容以及问题出在哪里？

标签： html css position icons alignment

【解决方案1】：

可以通过Flexbox和正确使用@media query和order属性来实现：

您可以检查此JSFiddle 以使用浏览器大小。

footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

footer p {
  margin: 0 30px;
}

@media (max-width: 480px) {
  footer {
    flex-direction: column;
  }
  
  footer i{
    order: 2;
  }
}

<footer>
  <i>icon one</i>
  <p>links</p>
  <i>icon two</i>
</footer>

【讨论】：

你的回答是对的，但他的情况是，他试图在手机上实现桌面视图，文本与屏幕一样宽。
看看他提供的链接。 i.stack.imgur.com/lBtmv.jpg 那个文字几乎和屏幕一样大，他/她想在它的两边放两张图片。
文本（在我的例子中是链接）在移动设备上是全屏的...通过更改文本在 jsfiddle 上试试。

【解决方案2】：

你可以使用css位置属性

body {
    background-color: #000;
    font-family: 'Roboto Mono', 'Arial', sans-serif; 
    font-size: 250%;
    font-weight: 300;
}

.logo {
    display: block;
    margin: 50px auto;
}


p {
    color: #ccc;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.coming-soon {
    color: #333;
    letter-spacing: 3px;
}

.autumn-2017 {
    color: #ccc; 
}

section p {
    display: block;
    margin: 50px auto 10px;
    font-size: 35%;
    text-transform: none;
    letter-spacing: 3px;
    line-height: 25px;
    color: #333;
}

.contact-info {
    margin: 15px auto;
    letter-spacing: 3px;
    line-height: 25px;
    color: #ccc;
    text-decoration: none;
    text-transform: none;
    font-size: 35%;
}

a:link, 
a:visited {
    text-decoration: none;
    color: #ccc;
    transition: font-weight 0.2s;
}

a:hover, 
a:active {
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
}


/* NEW CSS */

.footer-container{
   position:relative;
   padding:0 50px;
   text-align:center;
   max-width:300px; 
   margin:0 auto;
}

.ico{
   background-color:#333;
   display:inline-block;
   width:36px;
   height:36px;
   line-height:36px;
   font-size:12px;
   text-align:center;
   border-radius:36px;
   color:#FFF;
   
   position:absolute; top:50%; margin-top:-18px;
}

.fb{ left:0;  }
.tw{  right:0; }


@media (max-width: 768px) {
   .footer-container{ padding:0; }
   .ico{ position:static; margin-top:0px; }

}

<header>
   <div>
      <img src="iz-icon-logo.png" class="logo" alt="logo" />
      <p>
         <span class="coming-soon">coming soon.</span><span class="autumn-2017">&nbsp;autumn 2017.</span>
      </p>
   </div>
</header>

<section>
   <div>
      <p>If you have a Web Design or Development enquiry,<br>please contact:</p>
      <div class="footer-container">
      <p class="contact-info">
         <a href="mailto:webmaster@example.com">hello@illusionzero.co.uk</a><br>
         <a href="tel:07903490453">+44 (0) 7903 490453</a> 
       </p>
      <span class="ico fb">Fb</span>
         <span class="ico tw">Tw</span>
      </div>
   </div>
</section>

【讨论】：

Cheers Mahmoud，我在上面尝试了您的代码，当我在一个全新的文本文件中执行它时它可以工作，但是当我尝试将它与我自己的代码合并时，图标不会变小你在css中要求它的大小为42px，我无法让它们显示在我的文本的每一侧。我已经编辑了上面的原始帖子，显示了我的代码和我网站的实际图片。如果您能提供进一步的帮助，那就太好了
很高兴 GTM1。如果我理解正确，您想在页脚文本旁边添加社交网络的两个图标，因为我在您的代码中看不到图标