Jump to content
Please Use CODE Tags

How to center blocks in HTML

Kermit
By Kermit
in Programming
 Share
Go to solution Solved by Mr_KoKa,

 

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/

Posted

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 comment
Share on other sites
Link to post
Share on other sites
Posted

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 comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

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 comment
Share on other sites
Link to post
Share on other sites
Posted

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 comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

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 comment
Share on other sites
Link to post
Share on other sites
Posted

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 comment
Share on other sites
Link to post
Share on other sites
Posted

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 comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

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 comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

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 comment
Share on other sites
Link to post
Share on other sites
Posted

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 comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
  •  Solution
    • 
					
					
					
				

			

			
		

	

	

	

    

	

		

			

 


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 comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
  • Author
    • 
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			


 


 


<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 comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

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 comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
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
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
                

                




				
			

		

	







	

		
			
				Go to topic listing
				Programming
			
		
	

	





							

						

						


	

		
		
		
			

				



	
	



			

			

		
		

	

		
	


	


					

					

				

			

			
		

		
		


	×