Want to center tabs

HTML-CSS
1

Guys, new here!
I was wondering if someone could help to center those tabs?
Thanks,
Ed


 body {
	font: bold 13px/1.5em Verdana;
	}

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:0;
	}

hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}
	
#tabs {
	float:left;
	width:100%;
	background:#EFF4FA;
	font-size:93%;
	line-height:normal;
	/*border-bottom:1px solid #DD740B;*/
	}

#tabs ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
	}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
	}

#tabs a {
	float:left;
	background:url("tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
	}

#tabs a span {
	float:left;
	display:block;
	background:url("tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
	}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
	color:#FFF;
	}

#tabs a:hover {
	background-position:0% -42px;
	}

#tabs a:hover span {
	background-position:100% -42px;
	}
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Thanks, I didn’t know that, being a newbie. :grinning:

1 Like
4

OK, where are all those CSS gurus?
If nobody can answer my centering question, maybe someone can tell me how to keep the active tab highlighted?

5

If your Question here is How to center Any text In Center,

So the answer is by putting the value of text-align center

Or if you have another specific problem please do provide your Code !!

6

The code is on top.
I’d like to center the tabs and keep the active tab highlighted.

7

Hi there!
For centering any element you need to use margin property, flexbox or grid.

8

Welcome to the community :smiley:

Its difficult to help without all the code being provided, the HTML is also needed if anyone is to use your code to find solutions/bugs.
You do not have to send all code, but you should send anything you think necessary for others to see the problem your having and try things out on their machines.

I can only guess how you’ve structured your HTML or what it contains.

But I believe your looking for some kind of flexbox layout.

Here is an example of how your code can be changed to include flexbox.
This is the HTML I used to test:

<body>
    <h1>Test header</h1>
    <hr>
    <div id="tabs">
        <ul>
            <li><a href="">tab 1 <img width="12" src="./face.png"></a></li>
            <li><a href="">tab 2 <img width="12" src="./face.png"></a></li>
            <li><a href="">tab 3 <img width="12"src="./face.png"></a></li>
            <li><a href="">tab 4 <img width="12"src="./face.png"></a></li>
            <li><a href="">tab 5 <img width="12"src="./face.png"></a></li>
        </ul>
    </div>
</body>

image

Changes I made to your CSS to use flexbox:

#tabs ul {
	display: flex;
    justify-content: space-evenly;
	width:100%;
	background:#EFF4FA;
	font-size:93%;
	line-height:normal;
	/*border-bottom:1px solid #DD740B;*/
	}

image
image911Ă—99 1.42 KB

I hope this is helpful in some way.
However if you provide more information I might be able to give you a better answer :smiley:

9

Guided, thanks for the detailed response.
Here is the html code, hope that helps.

10

Where is the html code? You need to add three back ticks in a separate line below and above the code block.
Here’s the back ticks within the parentheses ( ```)

11 
<div id="tabs">
  <ul>
    <li><a href="index.html"><span>Home</span></a></li>
    <li><a href="home.htm"><span>Why Me?</span></a></li>
     </ul>
</div>
12

Guided, your solution kind of works. It centers the tabs but not completely. The right margin is larger than the left one. The 2 margins a different color.

navbar
navbar963Ă—84 10.3 KB

13

The code that was posted doesn’t do anything to the padding or margin. The space could also come from an outer container (what the nav/tabs are inside).

Learn to use the browser dev tools to inspect the styles.

View and change CSS

Please post all your code. The code you have posted does not look like what is in that image. Include the HTML and CSS for what the tabs are inside (their outer containers).

Your initial styles had different padding values for the left/right padding. Remember, the padding shorthand is top/right/bottom/left (clockwise).

Remove all use of float and switch to using flexbox or grid instead.

The backslash hack you have is ancient, no one uses those systems or browsers it was meant for. If you copied the code, I would suggest you find a newer example. You can keep the colors, but ditch the layout.

14

OK guys, I’ve centered it now.
Does anybody have a suggestion how I can get the active tab highlighted? I’m assuming it has to be some java script but I know nothing about that. Any help would be greatly appreciated.