2

I'm extremely new to HTML/CSS so this may be a stupid question, but I'm having a hard time centering my text in my navigation bar. I don't know how to properly center it horizontally OR vertically, so to get it horizontally I've just put a 25% left margin on the left-most element in the nav. I'm assuming that's not the proper way to do things. As for how to vertically center the text, I have absolutely no idea how to go about doing that.

As an added question, could anybody tell me how to make text scale when resizing the browser window? When I make the width of the window smaller, all my text scrunches up on the screen.

P.S. I'm doing this as an assignment for a class I'm in, but my instructor didn't really help.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Mini Vocaloid Wiki</title>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>

    <div id="page">

        <nav id="topNav">
            <a  id="left" href="vocaloids.html">Vocaloids</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>

    </div>

</body>
</html>

CSS:

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

#page {
    height: 100%;
    width: 100%;
    background-color: yellow;
    padding: 1%;
    background-image: url('images/background_image.jpg');
    background-repeat: no-repeat;
}

#topNav {
    border: 2px solid black;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 5%;
    text-align: center;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-image: url('images/blurred_background.jpg');
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2em;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    float: left;
    width: 15%;
    height: 100%;
    margin-right: 1%;
}

#left {
    margin-left: 25%;
}

#topNav a:hover {
    border-radius: 8px;
    background-color: white;
    color: black;
}

Edit: Here's a link to an image of what it currently looks like. I forgot to add this in. http://puu.sh/ld0LM/2de7d95deb.jpg

Edit 2: I was told by my instructor to use % instead of px whenever possible so that it scales when the browser window is changed, but is it reasonable to use % for almost everything? I assume that if i changed my nav height to something around 50 or 100px and then made my line-height the same, it would solve my problem, but I can't do that with %.

  • Simply asking others to do your homework for you hardly serves the purpose of homework. Depending on the extend of the assignment, this could be considered cheating already, which means you might fail your class when your TA finds out. And trust me we TAs are well aware of stackoverflow ;-) – Christian Fritz Nov 07 '15 at 20:11
  • @Christain Fritz, No, I'm not trying to cheat or do anything like that. I've googled and searched and searched for a few hours and couldn't find anything to help me. All I want is to center the text. The assignment isn't to simply center the text, it's to create a full website, but I just wanted my navigation bar to look pretty. –  Nov 07 '15 at 20:14
  • This is probably not what you want to hear but I think the easiest way for you (and for anyone) to do a proper navigation bar is to use table/table-cell properties. Of course this is just an advise you can achieve it an other way but this will basically match all you're requirement with the less possible of code. – Baldráni Nov 09 '15 at 17:31

5 Answers5

1

Try this https://jsfiddle.net/7qovrydb/

CSS 

#page {
    height: 100%;
    width: 100%;
    background-color: yellow;
    padding: 1%;
    background-image: url('images/background_image.jpg');
    background-repeat: no-repeat;
}

#topNav {
    border: 2px solid black;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    text-align: center;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-color: #22756B;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2em;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    height: 100%;
    font-size: 20px;
    padding: 10px;
}


#topNav a:hover {
    border-radius: 8px;
    background-color: white;
    color: black;
}
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
0

Change your nav a CSS by adding line-height: 40px to it.

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    float: left;
    width: 15%;
    height: 100%;
    margin-right: 1%;
    line-height: 40px;
}

or if you don't like that method you can add this to nav a:

position: relative;
top: 50%;
transform: translateY(-50%);

CODEPEN DEMO

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
  • That seemed to help slightly (lowering the text a bit), but it still looks like there's more space below the text than above. –  Nov 07 '15 at 20:17
  • you can adjust that number yo your liking, updated with another method as well. – Peter Girnus Nov 07 '15 at 20:19
0

I would like to help. You can simply add text-align: center; to you nav a css.

nav a {
    display: inline-block;
    text-decoration: none;
 text-align: center;
    color: white;
    float: left;
    width: 15%;
    height: 100%;
    margin-right: 1%;
}
David Willhite
  • 115
  • 1
  • 4
0

Horizontal alignment: add text-align:center to nav a.
Vertical alignment: try to set the nav to a fixed height: e.g.80px, then set the line-height to the same 80px to the nav a.

#topNav {
    border: 2px solid black;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 80px;
   /* text-align: center;*/
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-image: url('images/blurred_background.jpg');
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2em;
}

nav a {
   /* display: inline-block;*/
    padding:0px 1px 0px 1px;
    border-radius: 8px;
    text-align:center;
    text-decoration: none;
    color: white;
    float: left;
    width: 33%;
    height: 100%;
    line-height:80px;
}

#left {
   /* margin-left: 25%;*/
}

#topNav a:hover {
    border-radius: 8px;
    background-color: white;
    color: black;
}
alex
  • 1,300
  • 1
  • 29
  • 64
0

If you want to align your text in the middle, use text-align: center;. To make sure that there's an equal amount of space between the top and bottom of your text, use margin. E.g.: margin: 10px 0px 10px 0px;. I use px(pixel) for small adjustments and %(percentage) for large adjustments. For example: to make the length of a container take half of the page, I would use width: 50%; instead of width: 500px;

Lebone
  • 493
  • 2
  • 7
  • 12