Question

我使用HTML，CSS和Jscript编写了一个网站。在这个网站的页脚部分，我已经放置了社交网站链接，例如-facebook，twitter，youtube，google +，如下所示：

Example

如您所见，图标未与文字对齐;我正在寻求帮助以协调它们。

HTML：

<footer>
Find us @ 
<a href=""><img src="assets/images/facebook.png" alt="facebook"></a> 
<a href=""><img src="assets/images/twitter.png" alt="twitter"></a> 
<a href=""><img src="assets/images/google+.png" alt="google plus"></a> 
<a href=""><img src="assets/images/youtube.png" alt="youtube"></a>
</footer>

CSS：

footer                  {    
                        color: white;
                        width: 100%;
                        font-family: Arial, sans-serif;
                        font-weight: bold;
                        font-size: 10px;
                        background-color: black;
                        height: 30px;
                        text-align: center;
                        }


footer img              {
                        padding-top: 5px;
                        padding-bottom: 0px;
                        }

Answer 1

将vertical-align:middle;添加到您的图片CSS：

footer img {
    padding-top: 5px;
    padding-bottom: 0px;
    vertical-align:middle;
}

请注意，您可能需要调整填充。

Answer 2

使用vertical-align对齐文字和图标。此外，如果您从footer移除高度但是给它填充，则不再需要弄乱填充以平衡它。

请参阅此jsFiddle或下面的代码段。尝试更改图像高度以查看如何保持垂直居中：

＆＃13;

footer {    
    color: white;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    background-color: black;
    /*height: 30px; < Remove the height, let the content hold it open and adjust it with padding*/
    text-align: center;
    padding:5px 0; /* < Add some padding here instead of on the images */
}

footer img {
    /*padding-top: 5px; < Remove this padding */
    /*padding-bottom: 0px; < Remove this padding */
    vertical-align:middle; /*< Add vertical alignment */
    height:20px; width:20px; /*< This is just for testing because the sample images dont exist. Change the height to test the verticle alignment */
}

＆＃13;

<footer>
Find us @ 
    <a href=""><img src="assets/images/facebook.png" alt="facebook" /></a> 
    <a href=""><img src="assets/images/twitter.png" alt="twitter" /></a> 
    <a href=""><img src="assets/images/google+.png" alt="google plus" /></a> 
    <a href=""><img src="assets/images/youtube.png" alt="youtube" /></a>
</footer>

＆＃13;

或者，您可以考虑使用图标字体而不是图像。 https://icomoon.io/是这些资源的重要资源。以下是如何使用图标字体实现此目的的示例：

＆＃13;

@font-face {
	font-family: 'icomoon';
	src:url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.eot?3t0141');
	src:url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.eot?#iefix3t0141') format('embedded-opentype'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.woff?3t0141') format('woff'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.ttf?3t0141') format('truetype'),
		url('https://dl.dropboxusercontent.com/u/1025963/icomoon/icomoon.svg?3t0141#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
footer {    
    color: white;
    width: 100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    background-color: black;
    /*height: 30px; < Remove the height, let the content hold it open and adjust it with padding*/
    text-align: center;
    padding:5px 0; /* < Add some padding here instead of on the images */
}
footer a {
    font-size:20px;
    color:#eee;
    text-decoration:none;
    vertical-align:middle;
    transition: all 0.3s ease;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
footer a:hover {
    color:red;
}

＆＃13;

<footer>
Find us @ 
    <a href="">f</a> 
    <a href="">t</a> 
    <a href="">g</a> 
    <a href="">y</a>
</footer>

＆＃13;

Answer 3

解决此问题的一种方法：您的文字应与图标大小具有相同的行高。希望您的代码位于包装器中，如下所示：

    <div class="some-wrapper">Find us: @ <img src="facebook.png"><img src=twitter.png"><img src="googleplus.png"><img src="youtube.png"></div>

如果你的图标高度为16像素，那么这个图标的CSS将是

.some-wrapper {
    line-height: 16px;
}

需要帮助将图片与文本对齐

3 个答案: