How do I center align?-CodePudding

https://github.com/ProjectCubit/website.git

I have a little problem that I just cannot seem to solve. How do I center align I tried various methods, but nothing seems to work. I tried position: absolute, flex, and other methods from W3, sorry, if this seems like a silly question.

I'm a bit new to Programming, thanks.

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i  ) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord 1];
  for (var i = 0; i < cw.length; i  ) {
    animateLetterOut(cw, i);
  }
  
  for (var i = 0; i < nw.length; i  ) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
        cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
        nw[i].className = 'letter in';
  }, 340 (i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i  ) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);

.header_logo {
  width: 110px;
  height: 65px;
  margin-top: -16px;
  display: inline-block;
  vertical-align: middle;
  
}

body{
  font-family: Helvetica;
  font-size: 1.6rem;
}




/*Reset*/

/* colors 8a3aff, 6f79ff, 3a9fff black-> 1f4568  grey->8198ae*/
.sect{
padding: 90px 0;
position: relative;
}


.collapse{
display: block;
}

.sect--grey{
/*background-color: #ebeff9;*/
}

.sect--violet{
background-color:#6f79ff;
}

.sect--padding-bottom{
padding-bottom:115px;
}

.sect--padding-top{
padding-top:90px;
}

.row--center{
max-width: 1000px;
margin: 0 auto;
}
.row--margin{
margin-top:45px;
}

.row__title{
text-align: center;
font-size: 26px;
font-weight: 400;
margin-top: 0px;
}

.row__sub{
text-align: center;
font-size: 18px;
font-weight: 400;
margin: 0px; 
color: #8198ae;
}




/*menu header*/
.header{
padding: 30px 25px;
font-weight: bold;
}
.header__elenco {
  padding: 0;
  margin: 0;
  list-style: none;
}
.header__menu {
  float: right;
}
.header__el{
  padding: 0 25px;
  display: inline-block;
}

.header__logo, .header__menu{
display: inline-block;
vertical-align: middle;
}
.header__title{
font-size: 18px;
margin: 0;
margin-left: 10px;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}

.header__light{
color: #8198ae;
}
.header__link{
color: #1f4568;
font-size: 14px;

}
.header__link:hover{
text-decoration: none;
color:#3a9fff;
}
.navbar-toggle .icon-bar{
background-color: black;
}
.navbar-toggle {
  margin: 5px 0;
}



.text {
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.word {
  position: absolute;
  width: 220px;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wisteria {
  color: #8e44ad;
}

.belize {
  color: #2980b9;
}

.pomegranate {
  color: #c0392b;
}

.green {
  color: #16a085;
}

.midnight {
  color: #2c3e50;
}





@media screen and (max-width:1024px){
.collapse{
display: none;
}
.navbar-toggle {
  margin: 0;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}
.header__container{
  width: 100%;
  padding: 0;
}
.header__menu {
  width: 100%;
}
.header{
  background-color:#fff; 
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
}
.header__logo{
  padding: 12px 20px 12px 20px;
}
.header__el {
  display: block;
  padding: 10px 20px;
  border-top: 1px solid #ededed;
}

.header .btn--white, .header .btn--white:hover{
  padding: 0;
  border: 0;
  box-shadow: none;
  color:#fff;
  background-color:transparent;
}
.header__el--blue{
  background-color:#3a9fff;
}

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>WEB 3.0 Payments Infrastructure - Brix</title>
      <meta charset="UTF-8">
      <meta name="description" content="Brix provides a set of Tools for Businesses and Developers to integrate Cryptocurrency payments and payouts in their Solutions.">
      <meta name="keywords" content="Cryptocurrency, Blockchain, Payments">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="shortcut icon" type="image/png" href="https://image.ibb.co/fOur3b/favicon.png"/>
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel="stylesheet" href="./styles.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

      </head>
    <body>
<!--Navbar-->
    
  <body>
  <header class="header">
    <div class="container header__container">
  <div class="header__logo"><img class="header_logo" src="./images/branding/Brix_Logo.svg"></div> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
    
    <div class="header__menu">
      <nav id="navbar" class="header__nav collapse">
        <ul class="header__elenco">
          <li class="header__el"><a href="#" class="header__link">Home</a></li>
          <li class="header__el"><a href="#" class="header__link">Products</a></li>
          <li class="header__el"><a href="#" class="header__link">Brix for Consumers</a></li>
          <li class="header__el"><a href="#" class="header__link">About us</a></li>
  <a href="" class="btn btn--white">Contact Us →</a></li>
        </ul>
      </nav>
    </div>
      </div>
  </header>
  <!---->
<!-- partial:index.partial.html -->
<div class="text">
  <p>Nachos are</p>
  <p>
    <span class="word wisteria">tasty.</span>
    <span class="word belize">wonderful.</span>
    <span class="word pomegranate">fancy.</span>
    <span class="word green">beautiful.</span>
    <span class="word midnight">cheap.</span>
  </p>
</div>
<!-- partial -->
  </body>
  <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script><script  src="./script.js"></script>
    

</html>

CodePudding user response：

You can use text-align: center;, and <br> if you want. Here's a snippet:

.text {
  text-align: center;
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

<div class="text">
  <p>Nachos are</p><br/>
  <p>
    <span>tasty.</span><br/>
    <span>wonderful.</span><br/>
    <span>fancy.</span><br/>
    <span>beautiful.</span><br/>
    <span>cheap.</span><br/>
  </p>
</div>

Here it's all in one line:

.text {
  text-align: center;
  position: absolute;
  width: 450px;
  left: 50%;
  margin-left: -225px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
}

p {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

<div class="text">
  <p>Nachos are</p>
  <p>
    <span>tasty.</span>
    <span>wonderful.</span>
    <span>fancy.</span>
    <span>beautiful.</span>
    <span>cheap.</span>
  </p>
</div>

CodePudding user response：

I checked out your code & it centers after adding text-align: center to .text.

Adding flex to .text does not work for the following reason: The 2nd <p> containing the span.word has 0 width & height, due to its children being absolutely positioned. In order for flex to work you need to set appropriate width & height to the 2nd <p>.

But text-align: center unlike flex is inherited by all descendants, and not just the children.

CodePudding user response：

If you want to align inline all in one line, and center it in the middle of the page you can use flex to your parent only;

.text {
  display:flex;
  justify-content: center;
  align-items:center;
}