Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Kermit

How to center blocks in HTML

 

Go to what you had at first post and change float: left; to display: inline-block; and then adding text-align: center; to ul will make list items centered.

 

float: left makes all elements pulled to the left.

display: inline-block makes elements able to display one after another and you can still set width and height, if it would be just inline, you would need to set padding to enlarge element. text-align affects only inline elements (including inline-block)

 

But, you can use just one div and links inside it to create exactly same effect, example: https://jsfiddle.net/w34uurra/

Recommended Posts

Posted · Original PosterOP

I started HTML coding about 2 weeks ago, and am fairly bad at it. 

 

I know that you cant 

float: center;

BUT, I am trying to form a navigation bar at the top of my webpage (picture below), but the code I pulled from W3Schools.com aligns it to the right. I would like the blocks to remain centered, because right now I have to adjust the pixel width in order for it to look centered in my window.

 

W8WITmv.png

 

(Code from W3Schools.com page linked earlier)

<!DOCTYPE html><html><head><style>ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;}li {    float: left;}a {    display: block;    width: 60px;    background-color: #dddddd;}</style></head><body><ul>  <li><a href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact">Contact</a></li>  <li><a href="#about">About</a></li></ul></body></html>
 

My CSS is in an external document, not internal like in the code. (AKA: I linked it with href="file.css")

Help please!! Do I have to make a <div> in order to align the entire navigation bar in the center?

 

EDIT: The darkened "About Me" block is just because my mouse is hovering on it when I took the screenshot.


CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites

You want to center the nav bar, right?


i5 4670k @ 4.2GHz (Coolermaster Hyper 212 Evo); ASrock Z87 EXTREME4; 8GB Kingston HyperX Beast DDR3 RAM @ 2133MHz; Asus DirectCU GTX 560; Super Flower Golden King 550 Platinum PSU;1TB Seagate Barracuda;Corsair 200r case. 

Link to post
Share on other sites
Posted · Original PosterOP

You want to center the nav bar, right?

 

yeah


CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites

ul { text-align: center }


~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to post
Share on other sites
Posted · Original PosterOP

a { text-align: center }

 

where do I put that in my css?


CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites

where do I put that in my css?

I edited it.

also. why don't you use <div> ?


~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to post
Share on other sites

Give ul

text-align:center;

So it should be like :

ul {    list-style-type: none;    text-align:center;    margin: 0;    padding: 0;    overflow: hidden;}

i5 4670k @ 4.2GHz (Coolermaster Hyper 212 Evo); ASrock Z87 EXTREME4; 8GB Kingston HyperX Beast DDR3 RAM @ 2133MHz; Asus DirectCU GTX 560; Super Flower Golden King 550 Platinum PSU;1TB Seagate Barracuda;Corsair 200r case. 

Link to post
Share on other sites
Posted · Original PosterOP

 

Give ul

text-align:center;

So it should be like :

ul {    list-style-type: none;    text-align:center;    margin: 0;    padding: 0;    overflow: hidden;}

 

hmmm. Nothing, and I realized that I already had that entered elswhere (here is my entire css):

<style>         p{            color:black;        }        th{            background:#6600FF;            color:white;        }        td{            padding:12px;            color:black;        }        ul {    list-style-type: none;    text-align:center;    margin: 0;    padding: 0;    overflow: hidden;}li {    float: left;}a:link, a:visited {    display: block;    width: 277px;    font-weight: bold;    color: #FFFFFF;    background-color: #6666FF;    text-align: center;    padding: 10px;    text-decoration: none;    text-transform: uppercase;}a:hover, a:active {    background-color: #6600FF;}</style>

CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites
Posted · Original PosterOP

I edited it.

also. why don't you use <div> ?

 

I tried using <div>, but didn't really fully understand how to apply it. If I absolutely need to, I'll figure it out but if there is anything like float:center; and is simpler I'd like to know.

 

Also as I said I'm trash at HTML and just fooling around with stuff, but this should have worked right? (It didn't work)

<div align="center">  <ul>  <li><a href="home.html">Home</a></li>  <li><a href="index.html">Index</a></li>  <li><a href="aboutme.html">About me</a></li>  <li><a href="_____">n/a</a></li>  </ul></div>

CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites

I tried using <div>, but didn't really fully understand how to apply it. If I absolutely need to, I'll figure it out but if there is anything like float:center; and is simpler I'd like to know.

 

Also as I said I'm trash at HTML and just fooling around with stuff, but this should have worked right? (It didn't work)


 

 

<head> <style>  div.menu {     text-align:center;     list-style-type: none;     margin: 0;     padding: 0;     overflow: hidden;  }  </style></head><body> <div class="menu">  <a href="#home">Home</a>  <a href="#news">News</a>  <a href="#contact">Contact</a>  <a href="#about">About</a> </div></body>
+ your code will be more W3C valid :)

that should do the trick


~New~  BoomBerryPi project !  ~New~


new build log : http://linustechtips.com/main/topic/533392-build-log-the-scrap-simulator-x/?p=7078757 (5 screen flight sim for 620$ CAD)LTT Web Challenge is back ! go here  :  http://linustechtips.com/main/topic/448184-ltt-web-challenge-3-v21/#entry601004

Link to post
Share on other sites
Posted · Best Answer

 

Go to what you had at first post and change float: left; to display: inline-block; and then adding text-align: center; to ul will make list items centered.

 

float: left makes all elements pulled to the left.

display: inline-block makes elements able to display one after another and you can still set width and height, if it would be just inline, you would need to set padding to enlarge element. text-align affects only inline elements (including inline-block)

 

But, you can use just one div and links inside it to create exactly same effect, example: https://jsfiddle.net/w34uurra/

Link to post
Share on other sites
Posted · Original PosterOP

 

 

<head> <style>  div.menu {     text-align:center;     list-style-type: none;     margin: 0;     padding: 0;     overflow: hidden;  }  </style></head><body> <div class="menu">  <a href="#home">Home</a>  <a href="#news">News</a>  <a href="#contact">Contact</a>  <a href="#about">About</a> </div></body>
+ your code will be more W3C valid :)

that should do the trick

 

 

Thanks! That did the trick, and I'll know how to apply this in the future.

 

(other answer was a little simpler for me ATM, but this is something to keep in mind if I run into touble) 


CPU: Intel i5-2400 Mobo: ASUS Maximus IV Gene-Z RAM: 8GB G.Skill DDR3 1333MHz GPU: Sapphire R9 280x Tri-X Case Corsair Obsidian Series 350D PSU: EVGA 500w 80+ Certified

Link to post
Share on other sites

I got mine to centre without a div. using code from w3 schools. changing margin in UL to margin: 0 auto; and then settings the width to 240px (this is the 4 a links at 60px, 60 x 4 = 240)

 

makes the links centre without a div and without centring the text, though you can text-align a to make it look better.

<!DOCTYPE html><html><head><style>ul {    list-style-type: none;    margin: 0 auto;    padding: 0;    overflow: hidden;    width: 240px;    }li {    float: left;}a {    display: block;    width: 60px;   }</style></head><body><ul>  <li><a href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact">Contact</a></li>  <li><a href="#about">About</a></li></ul><p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p><p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p><p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p></body></html>

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Newegg

×