This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 9 years ago.
I am having difficulty trying to center my navigation text on my page. I want all my links to be in the center of my page the whole time, even if I re-size my window.
Thanks for your time.
HTML:
<div id="navcont">
<div id="navigation">
<ul>
<li class="home">Home</li>
<li class="about">About me</li>
<li class="portfolio">Portfolio</li>
<li class="contact">Talk to me</li>
</ul>
</div>
</div>
CSS:
#navcont{
height: 80px;
background-color: #ebebeb;
width: 100%;
padding-top: 10px;
}
#navigation{
font-size: 15px;
font-family: "TYPOGRAPH PRO" arial;
}
#navigation ul li{
list-style:none;
display:inline-block;
background-color:red;
width:120px;
}
#navigation ul li a{
text-transform:uppercase;
text-decoration:none;
color:black;
}
#navigation ul li a:hover{
color:#217c7e;
}
You want to use
text-align:center;
for this example. But if you make it more complex you may want to look at margin:0 auto; on the parent div. Also worth noting that in order for it to actually look center you will need to adjust the margins automatically applied to UL and LI
JS Fiddle: http://jsfiddle.net/W4eF3/
You should be able to just add text-align: center to your ul.
#navigation ul{
text-align: center;
}
This will center all the li elements, as well as the text inside them. If you don't want the text to center you could add a text-align: left to the li elements.
http://jsfiddle.net/ctCKg/
EDIT: But like others have said, this should be an easy search or trial and error for you. Lots of ways to do it too.
Add one property to your div CSS my friend
#navigation {
font-size: 15px;
font-family: "TYPOGRAPH PRO" arial;
text-align:center;
}
like this
Related
This question already has answers here:
Horizontal Centered Menu in CSS?
(5 answers)
Closed 7 years ago.
I've been trying to learn css/html by editing a template of website I got from the internet (it uses bootstrap), but I've hit a roadblock.
I have a list of horizontal elements. I want these elements to be centered, but I have no idea how.
This is the code:
<div class="row">
<nav>
<ul>
<li>Over ons</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</nav>
</div>
This results in the 4 elements to be horizontal, but they aren't centered and I have no idea how to center them.
I'm new to css/html, so if you need more information, please ask.
EDIT: I've looked a bit more in the css, and found this:
header ul { padding-top: 0px; text-align:center}
header ul li { list-style: none; float: left; text-transform: uppercase; letter-spacing: 2px; text-align: center;}
header ul li a { display: block; margin: 0 30px; color: #4d4959; text-align: center;}
I've added text-align:center; but this doesn't seem to work
Just add this CSS and the text will be centered:
li {
text-align:center;
}
<div class="row">
<nav>
<ul>
<li>Over ons</li>
<li>Diensten</li>
<li>Projecten</li>
<li>Contact</li>
</ul>
</nav>
</div>
use : text-align:center like so :
Demo
If the width is set on .row you can use
.row{ margin: auto;}
on your div will be centered. I asume that the li-elements are next to each other (horizontal & ".row") so that might work.
I cannot work out why the browser is not allowing me to set a margin-top or padding-top on a DIV to allow me to center the text.
HTML -
<div id="header">
<div id="Nav">
<div id="navright">
Home
About Us
Contact Us
Find Us
</div>
</div>
</div>
CSS -
#nav {
width: auto;
position: relative;
}
#nav a {
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
margin-top: 10px;
}
Result -
Any ideas where I am going wrong? Thanks
You are writing Nav nog nav
Html code should be:
<div id="nav"> not <div id="Nav">
Thats why your css doesn't work on the div
And use line-height for your a
#nav a {
line-height: (pixel height of the li or nav);
}
Working JsFiddle here
try to add display:inline-block; in you links
#nav a {
...
display:inline-block;
}
and rename <div id="Nav"> to <div id="nav">
add display: inline-block; to your a tag
demo
and obviously correct your typo Nav to nav.
#nav a {
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
height:25px;
line-height:25px;
margin:5px;
display:inline-block;
}
If you want the margin-top to appear you'll have to declare display: inline-block for the <a> elements, as someone already pointed out. If you want the text to be vertically centered, though, you could also work with something like line-height: 50px;.
Here's a fiddle to play with.
And you should of course correct the misspelling of your CSS selector or the HTML id attribute as mentioned by several users.
Add
display:inline-block
in #nav a
just add line-height as same as the height of your nav <div>
And do correct the typo error.
eg:
#nav {height:20px; float:left;}
#nav a {line-height:20px;}
I would like to know the better way to arrange the list items for the below menu.
As If I mention the list items as Item1,tem2,Item3 and so on as the Item is a small word it occupies less space and all are looking fine in the width as shown below:
But if I take the name as "Features", Support","How it works?" then it is not arranging them properly as it shows me lot of space n between each list item.
So is there any better way to get rid of this such as expanded menu by it's width or something like that
This is my css for the menu:
.menu
{
background-image: url('../images/header.png');
background-repeat: no-repeat;
}
ul.menu {
display:block;
margin:0;
padding:0;
height:60px;
text-align:right;
}
ul.menu li {
display:inline-block;
width:50px;
height:30px;
margin-right:10px;
}
ul.menu li:first-child {
float:left;
margin-left:10px;
}
ul.menu li a
{
text-decoration: none;
padding: 15px 0;
width: 50%;
color: #eee;
float: left;
text-align: center;
font-weight: bold;
font-style: normal;
font-family: Verdana;
}
This is my markup:
<div class="menu">
<ul class="menu">
<li>Home</li>
<li>Features</li>
<li>Support</li>
<li>Blog</li>
<li>How it work's</li>
</ul>
</div>
Actually according to Derek answer If I changed my width to 100px then it shows me this way
width:50px; is your problem.
You can remove it and:
manually set each item OR
create a function to measure the width of it's contents and adjust accordingly OR
leave them with no defined width
<li style="width: 60px;">Blog</li>
<li style="width: 130px;">How it work's</li>
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.
I have list items that displayed inline.
I want to align them vertically inside the green div.
<div id="topMenu" class="topMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Documents</li>
<li>Articles</li>
<li>Info</li>
</ul>
</div>
.topMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.topMenu a
{
color: White;
font-weight: bold;
text-decoration: none;
}
.topMenu
{
background-position: center;
background-color: Green;
height: 30px;
font-family: arial, Helvetica, sans-serif;
font-size: 0.8em;
vertical-align: middle;
text-align:center;
}
online demo
You could add line-height:30px; to your li elements, (the same as the height of the menu bar)
Demo
You can just the display of your <li> elements a bit, like this:
.topMenu li
{
display: inline-block;
list-style-type: none;
padding: 6px 10px;
}
Check out an updated demo here
Alternatively, you could add the padding to the <ul> with a new rule:
.topMenu ul {
padding-top: 6px;
}
Check out that version here
In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right".
You have to go with the padding property if you want to be strict xhtml and delete vertical-align.
Furthermore it makes no sense to try to align something vertically, that is displayed inline.
Just consider: padding is the inner space between the element and the boxmodel border.
Internet Explorer didn't support inline-block until version 8.
You might try the work-around here.