Html 在网页标题中对齐文本和社交媒体图标_Html_Css

Html 在网页标题中对齐文本和社交媒体图标

html css

Html 在网页标题中对齐文本和社交媒体图标,html,css,Html,Css,我正在努力将一个个人网站整合在一起，但我现在一直在尝试定位我的社交媒体图标，以便在标题中对齐。关于我的atm，请参见以下内容：文本和facebook图标沿标题的底部对齐，但是我想将文本放置在标题的中间，并且图标的顶部和底部之间的空间相同，以便它显示在中间。有人能帮我吗多谢各位忘记添加代码，现在有点乱： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g

我正在努力将一个个人网站整合在一起，但我现在一直在尝试定位我的社交媒体图标，以便在标题中对齐。关于我的atm，请参见以下内容：

文本和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>


奇伦
@font-face/*对浏览器和IE v10以后版本的支持*/
{font-family:homefont；src:url（“Juice.ttf”）；}
{font-family:headerfont；src:url（“playball.ttf”）；}
正文{background:url（'img/mybackground1.jpg'）无重复中心已修复；}
#标题容器{背景：#00E5EE；边框：0px实心#666；高度：60px；左侧：0；位置：固定；宽度：100%；顶部：0；}
#标题{行高：60px；边距：0自动；宽度：940px；文本对齐：居中；显示：内联块；浮动：右；填充：15px；}
#包装{宽度：900px；边距：0自动；}
a{color:#444；}
.logo{左边距：600px；右边距顶部：100px；背景：#fff；填充：10px；}
.bigtitle{字体系列：homefont；字体大小：100px；颜色：#FF0000；文本转换：大写；文本对齐：居中；页边空白顶部：200px；}
.header{font-family:headerfont；字体大小：20px；颜色：#FFFFFF；文本对齐：左；字体样式：斜体；}
跟随我：在css中，选择包含图标和文本的div（即div.facebookicon）并使用标准css格式（facebookicon.div{--css here-->）。使用命令text align:center；将它们横向居中。接下来，使用填充和边距（即padding:10px；）垂直获得所需效果。（在收割台中间居中）
编辑：我注意到您使用了text align:left；。这就是它被推到左侧的原因。您还可以尝试以下操作：
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}

（尝试细节）
在这种情况下，图片不是千言万语。发布一些代码。抱歉，我忘了这么做。代码添加了Hanks Big Bob，将对此进行研究。