Question

我想要的是我的页脚中的中心文字（版权），并将我的社交媒体链接与右侧文本放在同一行。但问题是，当我添加例如facebook图标那里，文字不再是中心了。

我想要的是什么：https://i.gyazo.com/cce548b5b19baff5165dfac3babff244.png

我现在所拥有的：https://i.gyazo.com/14675784e748c676b3c8a01cfe97b304.png

所以我如何得到文本中心，忽略图像的宽度，使其真正到达中间，而不是图像后剩余页脚的中间。

Answer 1

在图像上留下负边距 - 等于图像的宽度。

<div class="nav text-center">
  <span class="copright">Copyright</span>
  <img src="http://www.emp3.ws/img.php?i=http://i1.sndcdn.com/artworks-000126500818-m9uyre-large.jpg" alt="rocket" height="40" width="40" class='side-image' />
</div>

<!DOCTYPE html> 
<html>
 <head>
<title>jQuery Accordion Menu Demo</title> 
 <script src="http://code.jquery.com/jquery-latest.min.js" 'type="text/javascript"></script>`
<script src="main.js" type="text/javascript"></script>  
    </head>
    <body>
             <div id='menu'>
                <ul>
                <li>
                <a href='#'><span id="Science">Science</span></a>
                <ul>
                <li><a href='#'>Mathematics</a></li>
                <li><a href='#'>physics</a></li>
                <li><a href='#'>chemistry</a></li>
                </ul>
                </li>
                </ul>
                </div>
                <script>
                $('#menu li>ul>li').click(function()
                    { 
                      
                      var $spanEle = $(this).parent('ul').prev().find('span');
                     alert($spanEle.attr('id') +'..'+ $spanEle.text());
                 });
                </script>
        </body>
</html>

Answer 2

HTML：

<footer>
  <p>copyright</p>
  <img />
</footer

CSS：

footer {
  height:50px;
}

p {
  display: inline-block;
  text-align:center;
  line-height: 50px; /*Same height as footer*/
}

img {
  display: inline-block;
  float:right
}

应该像这样工作。代码未经过测试。

Answer 3

第一个问题是将float:right添加到图像中，但没有代码就很难知道将会做什么。

在div中居中文本而忽略同一行上的图像宽度

3 个答案: