All geek questions in one place

CSS Field Centering (Html ​​and Css)

I am trying to center these fields in the middle of the screen both horizontally and vertically. Another question: how can I do this when it resizes automatically when my page is scaled?

/*------------------------- Simple reset --------------------------*/ *{ margin:0; padding:0; } /*------------------------- General Styles --------------------------*/ /*---------------------------- Color Themes -----------------------------*/ .nav-colors{ position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; overflow: auto; } .home-link{ background-color:#00c08b; width: 15%; height: 80px; display: inline-block; margin-left: 10%; } .portfolio-link{ background-color:#ea5080; width: 15%; height: 80px; display: inline-block; } .social-link{ background-color:#53bfe2; width: 15%; height: 80px; display: inline-block; } .contact-link{ background-color:#f8c54d; width: 15%; height: 80px; display: inline-block; } .blog-link{ background-color:#df6dc2; width: 15%; height: 80px; display: inline-block; } 
 <!DOCTYPE html> <html> <head> <title>Neiko Anglin | Front-End Develper </title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="css/styles.css" /> <!-- Font Awesome Stylesheet --> <link rel="stylesheet" href="font-awesome/css/font-awesome.css" /> </head> <body> <div class="nav-colors"> <div class="home-link"> </div> <div class="portfolio-link"> </div> <div class="social-link"> </div> <div class="contact-link"> </div> <div class="blog-link"> </div> </div> </body> </html>
+5
source share
5 answers

You can use absolute positioning on the container to center vertically and horizontally:

 /*------------------------- Simple reset --------------------------*/ * { margin:0; padding:0; } /*------------------------- General Styles --------------------------*/ /*---------------------------- Color Themes -----------------------------*/ .nav-colors { position: absolute; background: white; height: 84px; width: 60%; margin: auto; padding: 20px; overflow: auto; top:0; right:0; bottom:0; left:0; } .home-link { background-color:#00c08b; width: 15%; height: 80px; display: inline-block; margin-left: 10%; } .portfolio-link { background-color:#ea5080; width: 15%; height: 80px; display: inline-block; } .social-link { background-color:#53bfe2; width: 15%; height: 80px; display: inline-block; } .contact-link { background-color:#f8c54d; width: 15%; height: 80px; display: inline-block; } .blog-link { background-color:#df6dc2; width: 15%; height: 80px; display: inline-block; } 
 <div class="nav-colors"> <div class="home-link"></div> <div class="portfolio-link"></div> <div class="social-link"></div> <div class="contact-link"></div> <div class="blog-link"></div> </div>
+1
source

To align vertically, you need a wrapper class with an absolute position in CSS. Find a vertical center that will bring you a ton of results. To resize margins and resize screens is a flexible template. I could suggest you use Twitter Bootstrap, which will take care of your measurements.

0
source

Change the .nav-color class to

 .nav-colors{ position: fixed; background: white; height: 80px; width:60%; margin: -60px 0 0 0; padding: 20px; overflow: auto; top:50%; left:20%; } 

 /*------------------------- Simple reset --------------------------*/ * { margin: 0; padding: 0; } /*------------------------- General Styles --------------------------*/ /*---------------------------- Color Themes -----------------------------*/ .nav-colors { position: fixed; background: white; height: 80px; width: 60%; margin: -60px 0 0 0; padding: 20px; overflow: auto; top: 50%; left: 20%; } .home-link { background-color: #00c08b; width: 15%; height: 80px; display: inline-block; margin-left: 10%; } .portfolio-link { background-color: #ea5080; width: 15%; height: 80px; display: inline-block; } .social-link { background-color: #53bfe2; width: 15%; height: 80px; display: inline-block; } .contact-link { background-color: #f8c54d; width: 15%; height: 80px; display: inline-block; } .blog-link { background-color: #df6dc2; width: 15%; height: 80px; display: inline-block; } 
 <div class="nav-colors"> <div class="home-link"> </div> <div class="portfolio-link"> </div> <div class="social-link"> </div> <div class="contact-link"> </div> <div class="blog-link"> </div> </div>
0
source

You just need to add some properties to your .nav-colors :

 .nav-colors{ position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; overflow: auto; line-height: 200px; text-align: center; }

And add vertical-align: middle; to the elements you want to center vertically.

0
source

First an explanation, then some code.

Vertical centering is a classic css issue. In this case, the vh block is very popular. Combined with stock (and possibly calc) its now a solvable thing.

Horizontal centering is quite simple, and you get it. Just set the width and set margin: 0 auto , and you're good to go.

With vertical centering, the key thing to remember is that you center your element, so half is above the middle, half is under the middle. With this we can do margin: calc(50vh-40px) auto 0 for your element 80px high and presto, in the middle vertically.

One more step:
Like horizontal centering, you seem to already have dynamic width using % . For dynamic vertical size, we can again refer to vh . It's nice that this saves us from the css calc function. Just subtract half the height from the 50vh field and you will get your stock. So for height: 20vh edge is margin: 40vh auto 0

Here is jsfiddle

and here is some code:

CSS

  *{ margin: 0; padding: 0; } html, body{ width: 100vw; height: 100vh; } .nav-colors{ width: 80%; height: 20vh; margin: calc(40vh) auto 0; } .nav-colors div{ width: 18%; margin: 0 0 0 1%; height: 100%; display: inline-block; } .home-link{background-color:#00c08b;} .portfolio-link{background-color:#ea5080;} .social-link{background-color:#53bfe2;} .contact-link{background-color:#f8c54d;} .blog-link{background-color:#df6dc2;}

HTML:

 <div class="nav-colors"> <div class="home-link"></div> <div class="portfolio-link"></div> <div class="social-link"></div> <div class="contact-link"></div> <div class="blog-link"></div> </div>

to use.

0
source

Source: https://habr.com/ru/post/1209261/

More articles:


All Articles