在网页的标题中整理文字和社交媒体图标

我正在努力将个人网站放在一起，但是我现在坚持尝试将我的社交媒体图标置于我的标题中对齐。请参见下面的什么，我有个大气压：在网页的标题中整理文字和社交媒体图标

enter image description here

文字和Facebook的图标沿着我的头的底部对齐，但是我想在整个头部中间的文字和之间的空间中的位置图标的顶部和底部相同，以便它出现在中心。谁能帮我这个？

谢谢

忘记添加代码，有点此刻凌乱：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/> 
<title> Chilun</title> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 
<style type="text/css"> 
@font-face /* support for browsers & IE v10 onwards*/ 
{font-family:homefont; src: url("Juice.ttf");} 
{font-family:headerfont; src: url("playball.ttf");} 
body {background:url('img/mybackground1.jpg') no-repeat center center fixed;} 
<!-- Make Header Sticky --> 
#header_container {background:#00E5EE; border:0px solid #666; height:60px; left:0; position:fixed; width:100%; top:0;} 
#header{line-height:60px; margin:0 auto; width:940px; text-align:center;display:inline-block; float:right; padding:15px;} 
#wrapper{width:900px;margin:0 auto;} 
a{color:#444;} 
.logo{margin-left:600px;margin-top:100px;background:#fff;padding:10px;} 
.bigtitle{font-family: homefont; font-size:100px; color:#FF0000; text-transform:uppercase; text-align:center; margin-top:200px;} 
.header{font-family: headerfont; font-size:20px; color:#FFFFFF; text-align: left; font-style:italic;} 
</style> 
</head> 
<body> 

<div id="header_container"> 
    <div id="header"><p class="header"> Follow me on: <a style="padding:5; margin:0; href="https://www.facebook.com/chilunliuTheBOSSE"; View my Facebook Profile</a><img src="/img/facebook-lnk.gif" width="40" height="40"></div></p> 
</div> 
    <div id="wrapper"> 
     <h1 class="bigtitle"> Chilun Liu</h1> 
    </div> 

</body> 
</html>

来源

2014-01-29 user1283674

在这种情况下，一个图片是不是字千言万语。发布一些代码。 – j08691

对不起，我忘了这么做。已添加代码 – user1283674

在CSS中，选择包含图标和文字（即div.facebookicon）的div和使用标准css格式（facebookicon.div {--css here--}。使用命令text-align：center;将它们横向居中。接下来，使用填充和边距（即padding：10px;）来获取（集中在头部中间）

编辑：我注意到d你使用了text-align：left;这就是为什么它被推到左边那样。你可以额外尝试这样的事情：

.className{ 
width:300px; 
height:200px; 
position:absolute; 
left:50%; 
top:50%; 
margin:-100px 0 0 -150px; 
}

（实验细节）

来源

2014-01-29 20:57:30

感谢大鲍勃，将对此进行调查。 – user1283674

在网页的标题中整理文字和社交媒体图标

回答

相关问题