-1

I have a basic type-writing element and I am having trouble centering it within a div. I have tried messing around with the margins, the position, the text alignment, all that. I honestly don't know what I'm doing so any help on this would be greatly appreciated.

This is my first time making a website so bear with me, I know this is probably a frequently asked question. I just couldn't find the answer on my own.

enter image description here

html {
  background: #545972;
  font-family: 'Roboto', sans-serif;
}

.nav {
  float: left;
  width: 15%;
  height: 100vh;
}

.home {
  float: left;
  width: 85%;
  height: 100vh;
}

section::after {
  content: '';
  display: table;
  clear: both;
}

.nav nav h1 {
  font-size: 40px;
  margin-left: 30px;
  position: relative;
}

.nav nav h1 a {
  color: #fff;
  text-decoration: none;
}

.nav nav ul {
  margin-top: 60px;
  line-height: 50px;
  margin-left: 60px;
}

.nav nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  padding: 10px;
  transition: color 0.5s;
}

.nav nav ul li a:hover {
  color: rgb(206, 203, 203);
}

.nav nav ul li i {
  color: rgb(27, 27, 31);
}

.vl {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  height: 100%;
  position: absolute;
  margin-left: 15%;
  top: 0;
}

.home img {
  position: absolute;
  width: 128px;
  height: 128px;
  margin-left: 50%;
}

.home .typewriting {
  margin: 0 auto;
}

.home .typewriting h1 a {
  text-decoration: none;
  color: #fff;
}
<section>
  <div class="nav">
    <nav>
      <h1><a href="">Ryan</a></h1>
      <ul class="fa-ul">
        <li> <i class="fa-li fa fa-home" aria-hidden="true"></i> <a href="">Home</a> </li>
        <li> <i class="fa-li fa fa-user" aria-hidden="true"></i> <a href="">About</a> </li>
        <li> <i class="fa-li fa fa-briefcase" aria-hidden="true"></i> <a href="">Services</a> </li>
        <li> <i class="fa-li fa fa-graduation-cap" aria-hidden="true"></i> <a href="">Experience</a> </li>
        <li> <i class="fa-li fa fa-code" aria-hidden="true"></i> <a href="">Projects</a> </li>
        <li> <i class="fa-li fa fa-comments" aria-hidden="true"></i> <a href="">Contact</a> </li>
      </ul>
      <div class="vl"></div>
    </nav>
  </div>

  <div class="home">

    <img src="images/logo.png">

    <div class="typewriting">

      <h1>
        <a href="" class="typewrite" data-period="2000" data-type='[ "Private Ryan" ]'>
          <span class="wrap"></span>
        </a>
      </h1>

    </div>

  </div>
</section>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
Private Ryan
  • 13
  • 1

2 Answers2

1

Add text-align: center on h1 element. Worked for me.

biscotto
  • 21
  • 2
-3

I believe that you are looking for the css property text-align. This property can position text center, left, right, or justify. For more information click here.

G1blue
  • 11
  • 3
  • Down-voted because the answer is to broad. `I believe ...` makes me think that you're guessing without actual proof or knowledge about your solution. Be more confident and try to use a [repro] that would clearly show that your solution would work. Be more specific. Dont link what text-align can do but show where to apply it with what value instead. – tacoshy Feb 04 '22 at 12:20
  • Thank you for the feedback. I'll try to keep this in mind. – G1blue Feb 17 '22 at 01:30