CODEWITHSUNDEEP
htmlcss
user1283674
user1283674

Reputation: 339

allign text and social media icons in header of webpage

I'm working on putting a personal website together, however I'm now stuck on trying to position my social media icons to align up within my header. See below on what I have atm:

enter image description here

The text and the facebook icon are aligned along the bottom of my header, however I want to position the text across the middle of the header and the space between the top and bottom of the icon to be the same so that it appears in the centre. Can anyone help me with this?

Thank you

Forgot to add code, a bit messy at the moment:

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

Upvotes: 0

Views: 1610

Answers (1)

Big Bob
Big Bob

Reputation: 96

In css, select the divs containing the icon and text (i.e. div.facebookicon) and use the standard css format for them ( facebookicon.div {--css here--}. Use the command text-align:center; to center them laterally. Next, fool around with the padding and margins (i.e. padding:10px;) to get the desired effect vertically. (centering it midway up the header)

Edit: I noticed that you used text-align:left;.. this is why it is being shoved over to the left like that. You could additionally try something like this:

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

(experiment with the specifics)

Upvotes: 1

Related Questions