Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

My text won't center itself, no matter what I try

byMR
July 6, 2023

No matter what I try, nothing I’ve seen on stackoverflow or even youtube will work. This is my current html:

(The text I’m talking about is the one with the about-me class, with the text "A bit more about me.")

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title id="ltitle">Cocolennon's Dev Stuff</title>
        <link rel="icon" type="image/x-icon" href="favicon.png">
        <meta name="description" content="I'm a 15 year old software and web developer from France.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv='cache-control' content='no-cache'> 
        <meta http-equiv='expires' content='0'> 
        <meta http-equiv='pragma' content='no-cache'>
        <meta content="#A020F0" data-react-helmet="true" name="theme-color">
        <meta content="https://www.cocolennon.xyz/favicon.png" property="og:image" />
        <link rel="stylesheet" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <header class="header">
            <a href="#" class="logo">Cocolennon</a>
            <nav class="navbar">
                <a href="#about-me">About Me</a>
                <!--
                <a href="#">Projects</a>
                <a href="#">Contact</a>
                -->
                <a href="#" onclick="setLang('en')">English</a>
                <a href="#" onclick="setLang('fr')">Français</a>
            </nav>
        </header>
        <h1 class="name">
            <span id="lname">Sup, my name's </span>
            <span style="color:darkorchid" id="lcoco">Cocolennon</span>
            <span class="aka" id="laka"> aka Coco</span>
        </h1>
        <h1 class="desc">
            <span id="lshort">I'm a 15 year old software and web developer from </span>
            <span style="color:blue" id="lfr">Fr</span><span id="lan">an</span><span style="color:red" id="lce">ce</span>.
        </h1>
        <div class="hsocials">
            <nav class="socials">
                <a href="https://www.youtube.com/@cocolennon_" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/youtube.svg);"></button>
                </a>
                <a href="https://discord.gg/yqG4u2JnrV" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/discord.svg);"></button>
                </a>
                <a href="https://github.com/Cocolennon" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/github.svg);"></button>
                </a>
                <a href="https://paypal.me/Cocolennon" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/paypal.svg);"></button>
                </a>
                <a href="https://steamcommunity.com/id/Cocolennon/" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/steam.svg);"></button>
                </a>
                <a href="https://namemc.com/profile/CCocolennon.1" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/namemc.svg);"></button>
                </a>
                <a href="https://e-z.bio/cocolennon" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/ezhost.svg);"></button>
                </a>
                <a href="https://www.twitch.tv/cocolennon_" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/twitch.svg);"></button>
                </a>
                <a href="mailto:contact@cocolennon.xyz" target="_blank">
                    <button class="button" style="background-image: url(images/svgs/gmail.svg);"></button>
                </a>
            </nav>
        </div>
        <h1 class="about-me">A bit more about me.</h1>
        <script src="script.js"></script>
    </body>
</html>

And here is my current css:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    min-height: 100vh;
}

body {
    background-image: linear-gradient(rgba(36,37,34,0.9),rgba(36,37,34,0.9)), url('images/grid.png');
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    background:#46354e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: 0px 0px 30px;
}

.logo {
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
}

.navbar a {
    position: relative;
    font-size: 18px;
    color: #fff;
    font-weight: lighter;
    text-decoration: none;
    margin-left: 3vw;
    transition: .3s;
}

.navbar a:hover {
    color: darkorchid;
}

.navbar a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 2px;
    background: #fff;
    transition: .3s;
}

.navbar a:hover::before {
    width: 100%;
    left: 0;
    background: darkorchid;
}

.name {
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
    font-size: 44px;
}

.aka {
    color: rgb(94, 94, 94);
    font-size: 22px;
    font-style: italic;
}

.desc {
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
    font-size: 44px;
    font-size: 28px;
    font-weight: lighter;
    top: 40%;
}

.hsocials {
    position: absolute;
    top: 50%;
    left: 9.2%;
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.socials a {
    position: relative;
    font-size: 18px;
    color: #fff;
    font-weight: lighter;
    text-decoration: none;
    margin-left: 10px;
    transition: .3s;
}

.button {
    position: relative;
    background-color: #525050;
    border: none;
    color: white;
    padding: 25px;
    font-size: 16px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    transition: 0.3s;
}

.button:hover {
    background-color: #949191;
    border-radius: 30%;
}

.about-me {
    position: absolute;
    top: 110%;
    display: block;
    text-align: center;
}

I’ve tried stuff like using display: flex and justify-content: center but that didn’t work aswell.
Using margin-left: auto and margin-right: auto didn’t work either.

>Solution :

I was able to do it with no trouble, meaning there is other CSS that is keeping text-align from centering it. I added a couple more style rules to hopefully override the other CSS when you add it to your real project. You may want to try !mportant directives, too.

Edit: rereading your post, is text-align: center perhaps what you are looking for? That would make sense because you’re trying to center text inside a 100% wide div. Not center the div itself in the page.

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Kanit', sans-serif;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  min-height: 100vh;
}

body {
  background-image: linear-gradient(rgba(36, 37, 34, 0.9), rgba(36, 37, 34, 0.9)), url('images/grid.png');
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  background: #46354e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: 0px 0px 30px;
}

.about-me
{
    text-align: center;
    display: block;
    width: 100%;
}
<header class="header">
  <a href="#" class="logo">Cocolennon</a>
  <nav class="navbar">
    <a href="#about-me">About Me</a>
    <!--
                <a href="#">Projects</a>
                <a href="#">Contact</a>
                -->
    <a href="#" onclick="setLang('en')">English</a>
    <a href="#" onclick="setLang('fr')">Français</a>
  </nav>
</header>
<h1 class="name">
  <span id="lname">Sup, my name's </span>
  <span style="color:darkorchid" id="lcoco">Cocolennon</span>
  <span class="aka" id="laka"> aka Coco</span>
</h1>
<h1 class="desc">
  <span id="lshort">I'm a 15 year old software and web developer from </span>
  <span style="color:blue" id="lfr">Fr</span><span id="lan">an</span><span style="color:red" id="lce">ce</span>.
</h1>
<div class="hsocials">
  <nav class="socials">
    <a href="https://www.youtube.com/@cocolennon_" target="_blank">
      <button class="button" style="background-image: url(images/svgs/youtube.svg);"></button>
    </a>
    <a href="https://discord.gg/yqG4u2JnrV" target="_blank">
      <button class="button" style="background-image: url(images/svgs/discord.svg);"></button>
    </a>
    <a href="https://github.com/Cocolennon" target="_blank">
      <button class="button" style="background-image: url(images/svgs/github.svg);"></button>
    </a>
    <a href="https://paypal.me/Cocolennon" target="_blank">
      <button class="button" style="background-image: url(images/svgs/paypal.svg);"></button>
    </a>
    <a href="https://steamcommunity.com/id/Cocolennon/" target="_blank">
      <button class="button" style="background-image: url(images/svgs/steam.svg);"></button>
    </a>
    <a href="https://namemc.com/profile/CCocolennon.1" target="_blank">
      <button class="button" style="background-image: url(images/svgs/namemc.svg);"></button>
    </a>
    <a href="https://e-z.bio/cocolennon" target="_blank">
      <button class="button" style="background-image: url(images/svgs/ezhost.svg);"></button>
    </a>
    <a href="https://www.twitch.tv/cocolennon_" target="_blank">
      <button class="button" style="background-image: url(images/svgs/twitch.svg);"></button>
    </a>
    <a href="mailto:contact@cocolennon.xyz" target="_blank">
      <button class="button" style="background-image: url(images/svgs/gmail.svg);"></button>
    </a>
  </nav>
</div>
<h1 class="about-me">A bit more about me.</h1>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading