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

我想要的是我的页脚（版权）中的中心文字，并将我的社交媒体链接与右边的文字排成一行。但问题是，当我添加例如那里有facebook图标，文字不再是中心。在div中居中文本，忽略同一行上的图像宽度

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

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

那么，如何获取文本中心，忽略了图像的宽度如此这般真的到了中间，而不是中间图像后留下页脚。

2016-01-25 Tontsasd

有几种方法可以做到这一点，你的代码是什么？ – Arthur

给出一个负边界左边的图像，相当于图像的宽度。

.nav { 
 
    background: #00A2E8; 
 
} 
 
.text-center { 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 
.copright { 
 
    line-height: 40px; 
 
} 
 
.side-image { 
 
    float: right; 
 
    margin-left: -40px; 
 
}

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

来源

2016-01-25 07:27:42 anurag

非常感谢，这就是我一直在寻找的！ – Tontsasd

很高兴知道，它解决了您的问题。干杯 – anurag

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

来源

2016-01-25 07:22:51 Shlizer

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 
}

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

来源

2016-01-25 07:43:21

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

回答

相关问题