CSS/HTML How to Align Text

Question

Today I am wondering how to align text horizontally. us.mineplex.com The forums, shop, title, etc are aligned perfectly and horizontal. How do they do that? I tried to figure it out my self and need some help, Thanks.

CSS:

.header_container{
width: 100%;
height: 185px;
background-color: black;

}

.navtabscontainer{

    background-color:   #6ED16E;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border: solid;
    border-color: blue;
    position: relative;
    top: 180px;
    height: 75px;
    text-align: center;
    list-style: none;



}

.headerlogo{

    background-image: url('logo.png');


}

.divider{

    height: 49;
    width: 3px;
    background-color: white;
    position: absolute;
    left: 109px;
    top: -16px;


}

.navtabs{

color: white;
text-decoration: none; 
font-size: 20px;
position: absolute;
left: 50px;
top: 30px;
list-style-type: none;
text-align: center; 


}

* {
margin: 0;


}

.textip{


    border: solid;
    border-color: blue;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    color: red;
    font-size: 20px;
    position: absolute; 
    right: 300px;
    top: 100px;



}

HTML:

<html>
<head><title>Minetage</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

   <div class="header_container">
    <h3 class="textip">Server IP: Minetage.com</h3>
    <div class="header_logo">
    <div class="navtabscontainer">
            <ul class="navtabs">
                <li href="Games">Games</i>
                <li class="divider"></li>
                <li href="Games">Forums</i>
                <li class="divider"></li>
                <li href="Games">Home</i>
                <li class="divider"></li>
                <li href="Games">Leaderboards</i>
                <li class="divider"></li>
                <li href="Games">Contact</li>
            </ul>




</body>
</html>

where are the end tag ``s?? – Tun Zarni Kyaw Feb 26 '14 at 02:48 — Tun Zarni Kyaw, Feb 26 '14 at 02:48

Timmah · Answer 1 · 2014-03-03T22:01:02.693

You can make your list appear inline like this:

.navtabs li {
    display:inline;
}

This way you won't need the empty list items as dividers.

If you want to space them out, add left/right padding or margins to the anchor inside (which you'll need anyway if it's a menu).

<ul class="navtabs">
    <li><a href="myPage.htm">Games</a></i>
    <li><a href="myOtherPage.htm">Stuff</a></i>
</ul>

then

ul.navtabs li a   {
    display:block;
    padding: 0 2em;
}

Assigning display:inline; to the list item, then display:block; to the anchor within allows styling the link without needing 'display:inline-block', which causes issues with older versions of IE

Also, 'href' is an attribute for anchors <a>, not list items <li>. If you click a <li>; with a href attribute, it won't do anything.

score 0 · Answer 2 · answered Feb 26 '14 at 02:46

0

You need to display the list inline. The following should work:

.navtabs li {
    display:inline-block;
}

answered Feb 26 '14 at 02:46

Dolores

323
1
12

score 0 · Answer 3 · answered Feb 26 '14 at 02:57

0

Your problem is that li are by default set to display: block; This style makes the width as wide as its parent element.

To fix this, give all the li tags the style display: inline-block.
Example jsfiddle

answered Feb 26 '14 at 02:57

PixelAcorn

494
8
26

score 0 · Answer 4 · edited May 23 '17 at 12:03

0

Add this to your CSS

.navtabs li
{
    float:left;
    display:inline-block;
   padding-left:5px;
}

Float:left this floats the li element to the left display:inline-block; Click here to know about Display properties

Fiddle

Output:

enter image description here

edited May 23 '17 at 12:03

Community

1
1

answered Feb 26 '14 at 03:06

Amarnath Balasubramanian

9,300
8
34
62

CSS/HTML How to Align Text

4 Answers4