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.
Related
I want to float my ul to the left and the list items to the right so that they look like this inside a div:
Item 1 Item 2 Item 3
CSS:
.body-nav {
width: 1090px;
margin: 0 auto 0 auto;
background-color: lightblue; }
.body-nav ul {
margin: 0;
padding: 0;
float: left;
list-style: none; }
.body-nav ul li {
float: right;
padding-right: 15px; }
I got the links to look how I want them to look. The problem here is I'm losing my background color. It's like these links are outside of the div.
Here is my HTML:
<header>
<div class="header-content">
<img src="images/logo.png" class="logo" alt="Site Logo">
<ul>
<li>24/7 Support (513) 571-7809</li>
<li>Manage my account</li>
</ul>
</div>
</header>
<div class="body-nav">
<ul>
<li>Web Hosting</li>
<li>Reseller Hosting</li>
<li>Domain Names</li>
<li>SSL Certificates</li>
</ul>
</div><!--end body div-->
The following will fix your issue (http://jsfiddle.net/76y7wbf6/1/):
.body-nav {
overflow:hidden;
}
The issue stems from using floats, which takes a slight step outside of the normal DOM flow. Your .body-nav element loses track of its children, and occupies a height of 0 (or 1px).
Another alternative is to apply a clearfix class to body-nav, which would look something like (http://jsfiddle.net/76y7wbf6/):
.clearfix:after {
clear:both;
display: block;
content: ' ';
}
A metaphore I like to use:
Using floats is like traveling through hyperspace. They exist, kinda, and can impact other DOM elements... but they are also travelling at a different dimensional plane (left-right).
To bridge the float hyperspace travel, you can apply clear:both on itself or overflow:hidden on its parent.
... And if you apply float on a floating element's parent, it can provide a self-clear, but then that parent is traveling through hyperspace too.
This is just to show you that there is simple ways of doing what you want to achieve ( a horizontal unordered list ) instead of using limited approaches such as display:inline-flexor complicated/tricky approaches
Bottom line let's not over-complicate what is simple.
So,
remove the float:left from your .body-nav ul (there is no point on being there)
set your .body-nav ul li to display inline (with this the li's will display as it states - inline - instead of the default behavior display:list-item
Snippet below:
.body-nav {
width: 1090px;
margin: 0 auto 0 auto; /* you can shorthand this to - margin:0 auto - */
background-color: lightblue;
}
.body-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.body-nav ul li {
display:inline;
padding-right: 15px;
}
<header>
<div class="header-content">
<img src="images/logo.png" class="logo" alt="Site Logo">
<ul>
<li>24/7 Support (513) 571-7809</li>
<li>Manage my account
</li>
</ul>
</div>
</header>
<div class="body-nav">
<ul>
<li>Web Hosting
</li>
<li>Reseller Hosting
</li>
<li>Domain Names
</li>
<li>SSL Certificates
</li>
</ul>
</div>
<!--end body div-->
Instead of mucking around with floats, why don't you make use of CSS3 and use the flexbox layout. Setting the UL display to "inline-flex" will give you the desired result with the lightblue background.
So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
Home
About
Team
Science
Need
Pipeline
Contact
</div>
</header>
CSS:
header .nav {
margin-top:100px;
width:100%;
height:10%;
text-align:center;
padding-top:2%;
margin:0 auto;
position:fixed;
top:0;
}
header .nav a {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
color:rgb(1, 1, 1);
text-decoration: none;
font-family: 'Bebas';
}
header .nav a:hover {
color:white;
background-color: #404040;
border-radius:5px;
padding:0 auto;
}
header .nav a:active{
background-color: #404040;
border-radius:5px;
text-decoration:overline;
}
header .nav img {
width:260px;
height:65px;
padding-right:4em;
}
The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.
OR, can you tell me any other way to create a NAV bar that shows the logo as well.
so it would be LOGO and MENUS on the same line.
Great thanks in advance.
Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.
I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.
have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties
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
I realise vertically centring is a topic which comes up often on here and other websites but I'm still new to HTML and even after reading up on this topic I'm still confused.
I've tried making a simple header element for a website which contains an h1 title and a nav ul for the navigation links. Here is the html:
<!doctype html>
<html>
<head>
<title>Sample website</title>
<link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Website Title Here</h1>
<ul>
| <li>Home</li> |
<li>About me</li> |
<li>Contact me</li> |
<li>My blog</li> |
<li>My portfolio</li> |
</ul>
</header>
<hr class="hrstyle" style="clear:both;"/>
</body>
</html>
And the respective CSS:
header{
max-width: 1000px;
margin:auto;
}
h1{
font-family: Helvetica;
float: left;
padding:0;
}
ul{
display: inline-block;
float: right;
padding:0;
}
li {
font-family: Helvetica;
font-variant: small-caps;
list-style-type: none;
display: inline;
}
.hrstyle{
max-width:1000px;
}
I'm trying to get the h1 title and nav list to line centre align to one another vertically. Currently it looks like this...
With the nav element appearing at the top of the header.
I've read numerous things but I'm hesitant to just blindly copy code from the internet without fully understanding it.
Try line-height. Add this to your ul in your CSS
ul {
...
line-height: 40px;
}
Tweak the number to your desire.
Here's a little tutorial for you on different vertical centering techniques. I'll keep adding to this. But it might illustrate for you how elements react to different styling.
Codpen example on padding and line-height
For your ul add this:
ul{
...
position:absolute;
top:25px;
right:0px;
}
Position absolute allows you to control the position of the element from the sides. So push it a certain amount from the top and 0 from the right. This will produce what you described.
Here is the fiddle:
http://jsfiddle.net/AnPkT/2/
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.