Text is not centered
Question
I found lot of codes how to center text, but nothing works. Somewhere must be error in my code. I try to center h1.main to the middle of the page. 50% top and 50% left. But always are there some pixels out from both sides. It doesn't center text.
$('.menu-toggle').click(function(){$('.site-nav').toggleClass('site-nav--open',500);$(this).toggleClass('open');}) $('.menu-link').click(function(){$('.site-nav').toggleClass('site-nav--open',250);$('.menu-toggle').toggleClass('open');}) $(function($){$('a').on('click',function(e){var $anchor=$(this).attr("href");var $hrefStart=$anchor.substr(0,1);if($hrefStart=="#"){$('html,body').animate({scrollTop:$($anchor).offset().top},1500,'easeInOutExpo');e.preventDefault();}else{window.location.href=$anchor;}});})(jQuery);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800'); body { background: #1d1d1d; font-family: 'Montserrat', sans-serif; font-size: 16px; margin: 0 auto; padding: 0; overflow-x: hidden; } .container { width: 100%; margin: 0 auto; padding: 0; } header { background-color: #1d1d1d; color: #EBEBD3; padding: 1em 0; position: fixed; width: 100%; z-index: 999; } header::after { content: ''; clear: both; display: block; } .logo { float: left; font-size: 1rem; margin: 0; position: relative; left: 5%; text-transform: uppercase; font-weight: 700; } .logo span { font-weight: 400; } .site-nav { position: absolute; background-color: #1d1d1d; top: 100%; right: 0; height: 0px; overflow: hidden; transition: .5s ease-in-out; opacity: 0; width: 100%; z-index: 99999; } .site-nav--open { height: 100vh; opacity: 100; } .site-nav ul { padding: 0; list-style: none; margin: 0; } .site-nav li { width: 100%; text-align: center; /* border-bottom: 1px solid #575766;*/ } .site-nav li:last-child { /* border-bottom: none; */ } .site-nav a { font-weight: 800; font-size: 40px; color: #9E9E9E; text-decoration: none; display: block; padding: 2em; text-transform: uppercase; z-index: 99999; } .site-nav a:hover, .site-nav a:focus { color: white; } .menu-toggle { position: fixed; padding: 1em; position: absolute; right: .75em; top: .5em; cursor: pointer; } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background-color: #2ecc71; height: 3px; width: 1.75em; border-radius: 3px; transition: .5s ease-in-out; } .hamburger::before { transform: translateY(-6px); } .hamburger::after { transform: translateY(3px); } .open .hamburger::before { opacity: 0; } .open .hamburger::after{ transform: translateY(-3px) rotate(90deg); } .open .hamburger { transform: rotate(45deg); } #particles-js { height: 100vh; width: 100%; } #about { height: 100vh; } #portfolio { height: 100vh; background-color: blue; } #contact { height: 100vh; background-color: red; } h1.main { color: white; position: absolute; padding: 0; margin: 0 auto; top: 50%; display: inline-block; left: 50%; text-align: center; font-size: 5rem ; } h2 { color: white; position: absolute; top: 60%; left: 5%; font-size: 2em; } a.logo { text-decoration: none; color: #2ecc71; } span.home { position: absolute; top: 50%; right: 1%; transform: rotate(90deg); color: #fff; font-size: 1em; } @media only screen and (max-width: 500px) { .site-nav a { padding: 2em; font-size: 1.5em; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <meta name="description" content="Doplniť neskôr"> </head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> <body> <header> <div class="container"> <a href="#particles-js" class="logo"><h1 class="logo">Lorem <span>ipsum</span></h1></a> <nav class="site-nav"> <ul> <li><a class="menu-link" href="#particles-js">Home</a></li> <li><a class="menu-link" href="#about">About</a></li> <li><a class="menu-link" href="#portfolio">Portfolio</a></li> <li><a class="menu-link" href="#contact">Contact</a></li> </ul> </nav> <div class="menu-toggle"> <div class="hamburger"></div> </div> </div> </header> <div id="particles-js"> <h1 class="main">Lorem ipsum</h1> </div> <span class="home">Home</span> <div id="about"> </div> <div id="portfolio"></div> <div id="contact"></div> <script src="js/particles.js"></script> <script src="js/app.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </body> </html>
3 answers
solution1
2 2018-08-12 17:32:33
let me explain the issue with your code, since you need the text to be center, hence can get rid of left: 50% and add left:0; width: 100% left:0; width: 100% . these two updates fixes your issue, please check the below working snippet, hope it helps :)
$('.menu-toggle').click(function () { $('.site-nav').toggleClass('site-nav--open', 500); $(this).toggleClass('open'); }) $('.menu-link').click(function () { $('.site-nav').toggleClass('site-nav--open', 250); $('.menu-toggle').toggleClass('open'); }) $(function ($) { $('a').on('click', function (e) { var $anchor = $(this).attr("href"); var $hrefStart = $anchor.substr(0, 1); if ($hrefStart == "#") { $('html,body').animate({ scrollTop: $($anchor).offset().top }, 1500, 'easeInOutExpo'); e.preventDefault(); } else { window.location.href = $anchor; } }); })(jQuery);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800'); body { background: #1d1d1d; font-family: 'Montserrat', sans-serif; font-size: 16px; margin: 0 auto; padding: 0; overflow-x: hidden; } .container { width: 100%; margin: 0 auto; padding: 0; } header { background-color: #1d1d1d; color: #EBEBD3; padding: 1em 0; position: fixed; width: 100%; z-index: 999; } header::after { content: ''; clear: both; display: block; } .logo { float: left; font-size: 1rem; margin: 0; position: relative; left: 5%; text-transform: uppercase; font-weight: 700; } .logo span { font-weight: 400; } .site-nav { position: absolute; background-color: #1d1d1d; top: 100%; right: 0; height: 0px; overflow: hidden; transition: .5s ease-in-out; opacity: 0; width: 100%; z-index: 99999; } .site-nav--open { height: 100vh; opacity: 100; } .site-nav ul { padding: 0; list-style: none; margin: 0; } .site-nav li { width: 100%; text-align: center; /* border-bottom: 1px solid #575766;*/ } .site-nav li:last-child { /* border-bottom: none; */ } .site-nav a { font-weight: 800; font-size: 40px; color: #9E9E9E; text-decoration: none; display: block; padding: 2em; text-transform: uppercase; z-index: 99999; } .site-nav a:hover, .site-nav a:focus { color: white; } .menu-toggle { position: fixed; padding: 1em; position: absolute; right: .75em; top: .5em; cursor: pointer; } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background-color: #2ecc71; height: 3px; width: 1.75em; border-radius: 3px; transition: .5s ease-in-out; } .hamburger::before { transform: translateY(-6px); } .hamburger::after { transform: translateY(3px); } .open .hamburger::before { opacity: 0; } .open .hamburger::after { transform: translateY(-3px) rotate(90deg); } .open .hamburger { transform: rotate(45deg); } #particles-js { height: 100vh; width: 100%; } #about { height: 100vh; } #portfolio { height: 100vh; background-color: blue; } #contact { height: 100vh; background-color: red; } h1.main { color: white; position: absolute; padding: 0; margin: 0 auto; top: 50%; left: 0%; text-align: center; font-size: 5rem; width: 100%; } h2 { color: white; position: absolute; top: 60%; left: 5%; font-size: 2em; } a.logo { text-decoration: none; color: #2ecc71; } span.home { position: absolute; top: 50%; right: 1%; transform: rotate(90deg); color: #fff; font-size: 1em; } @media only screen and (max-width: 500px) { .site-nav a { padding: 2em; font-size: 1.5em; } }
<header> <div class="container"> <a href="#particles-js" class="logo"> <h1 class="logo">Lorem <span>ipsum</span> </h1> </a> <nav class="site-nav"> <ul> <li> <a class="menu-link" href="#particles-js">Home</a> </li> <li> <a class="menu-link" href="#about">About</a> </li> <li> <a class="menu-link" href="#portfolio">Portfolio</a> </li> <li> <a class="menu-link" href="#contact">Contact</a> </li> </ul> </nav> <div class="menu-toggle"> <div class="hamburger"></div> </div> </div> </header> <div id="particles-js"> <h1 class="main">Lorem ipsum</h1> </div> <span class="home">Home</span> <div id="about"></div> <div id="portfolio"></div> <div id="contact"></div> <script src="js/particles.js"></script> <script src="js/app.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
solution2
2 ACCPTED 2018-08-12 17:50:50
Just add transform: translate(-50%,-50%); to below code
h1.main {
color: white;
position: absolute;
padding: 0;
margin: 0 auto;
top: 50%;
display: inline-block;
left: 50%;
text-align: center;
font-size: 5rem;
transform: translate(-50%,-50%);
}
transform: translate(-50%,-50%) will center the element wrt to its own position, as the pivot/anchor of the element is to the top-left.
This works by pushing itself left and top by 50% of its own length and height, thus centering the element
$('.menu-toggle').click(function() { $('.site-nav').toggleClass('site-nav--open', 500); $(this).toggleClass('open'); }) $('.menu-link').click(function() { $('.site-nav').toggleClass('site-nav--open', 250); $('.menu-toggle').toggleClass('open'); }) $(function($) { $('a').on('click', function(e) { var $anchor = $(this).attr("href"); var $hrefStart = $anchor.substr(0, 1); if ($hrefStart == "#") { $('html,body').animate({ scrollTop: $($anchor).offset().top }, 1500, 'easeInOutExpo'); e.preventDefault(); } else { window.location.href = $anchor; } }); })(jQuery);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800'); body { background: #1d1d1d; font-family: 'Montserrat', sans-serif; font-size: 16px; margin: 0 auto; padding: 0; overflow-x: hidden; } .container { width: 100%; margin: 0 auto; padding: 0; } header { background-color: #1d1d1d; color: #EBEBD3; padding: 1em 0; position: fixed; width: 100%; z-index: 999; } header::after { content: ''; clear: both; display: block; } .logo { float: left; font-size: 1rem; margin: 0; position: relative; left: 5%; text-transform: uppercase; font-weight: 700; } .logo span { font-weight: 400; } .site-nav { position: absolute; background-color: #1d1d1d; top: 100%; right: 0; height: 0px; overflow: hidden; transition: .5s ease-in-out; opacity: 0; width: 100%; z-index: 99999; } .site-nav--open { height: 100vh; opacity: 100; } .site-nav ul { padding: 0; list-style: none; margin: 0; } .site-nav li { width: 100%; text-align: center; /* border-bottom: 1px solid #575766;*/ } .site-nav li:last-child { /* border-bottom: none; */ } .site-nav a { font-weight: 800; font-size: 40px; color: #9E9E9E; text-decoration: none; display: block; padding: 2em; text-transform: uppercase; z-index: 99999; } .site-nav a:hover, .site-nav a:focus { color: white; } .menu-toggle { position: fixed; padding: 1em; position: absolute; right: .75em; top: .5em; cursor: pointer; } .hamburger, .hamburger::before, .hamburger::after { content: ''; display: block; background-color: #2ecc71; height: 3px; width: 1.75em; border-radius: 3px; transition: .5s ease-in-out; } .hamburger::before { transform: translateY(-6px); } .hamburger::after { transform: translateY(3px); } .open .hamburger::before { opacity: 0; } .open .hamburger::after { transform: translateY(-3px) rotate(90deg); } .open .hamburger { transform: rotate(45deg); } #particles-js { height: 100vh; width: 100%; } #about { height: 100vh; } #portfolio { height: 100vh; background-color: blue; } #contact { height: 100vh; background-color: red; } h1.main { color: white; position: absolute; padding: 0; margin: 0 auto; top: 50%; display: inline-block; left: 50%; text-align: center; font-size: 5rem; transform: translate(-50%,-50%); } h2 { color: white; position: absolute; top: 60%; left: 5%; font-size: 2em; } a.logo { text-decoration: none; color: #2ecc71; } span.home { position: absolute; top: 50%; right: 1%; transform: rotate(90deg); color: #fff; font-size: 1em; } @media only screen and (max-width: 500px) { .site-nav a { padding: 2em; font-size: 1.5em; } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <meta name="description" content="Doplniť neskôr"> </head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="normalize.css"> <body> <header> <div class="container"> <a href="#particles-js" class="logo"> <h1 class="logo">Lorem <span>ipsum</span></h1> </a> <nav class="site-nav"> <ul> <li><a class="menu-link" href="#particles-js">Home</a></li> <li><a class="menu-link" href="#about">About</a></li> <li><a class="menu-link" href="#portfolio">Portfolio</a></li> <li><a class="menu-link" href="#contact">Contact</a></li> </ul> </nav> <div class="menu-toggle"> <div class="hamburger"></div> </div> </div> </header> <div id="particles-js"> <h1 class="main">Lorem ipsum</h1> </div> <span class="home">Home</span> <div id="about"> </div> <div id="portfolio"></div> <div id="contact"></div> <script src="js/particles.js"></script> <script src="js/app.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </body> </html>
solution3
0 2018-08-12 17:29:33
It's an easy fix, you just need to update your 2 code blocks in your CSS. The problem was your container #particle-js is not centering your h1 vertically. So I just set its display: flex and using align-items property I have aligned it to vertically center.
#particles-js {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
}
h1.main {
color: white;
padding: 0;
margin: 0 auto;
text-align: center;
font-size: 5rem ;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Centered responsive text
Text centered but not responsive
Text not centered inside button
Text align in a DIV that is centered
Drop caps and Centered text
Centered text and justified
Do not want the text to be centered
Centered image with text
Centered icon and text in div
Not centered text in Bootstrap column
Related Tags