如何居中显示此文字动画？

Question

Super new to text animation and coding in general - so apologies in advance! I'm currently trying to center this entire text animation on a header section of a website. I've been playing around with the css, but I'm having a hard time getting it to look centered and stay horizontal and look nice on mobile. Any advice or info would be great :) Thanks so much!

Here it is! https://codepen.io/kamwam/pen/PoYzNqw

 .rw-wrapper { width: 80%; position: absolute; text-align: center; margin: 110px auto 0 auto; font-family: 'Playfair Display'; font-weight: 600; padding: 10px; } .after { margin-left: 134px; } .rw-sentence { margin: 0; text-align: left; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } .rw-sentence span { color: #333; font-size: 200%; font-weight: 400; } .rw-words { display: inline; text-indent: 10px; } .rw-words-1 span { position: absolute; opacity: 0; overflow: hidden; color: #0076bb; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #0076bb; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #0076bb; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #0076bb; } .rw-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #0076bb; } .rw-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #0076bb; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media screen and (max-width: 768px) { .rw-sentence { font-size: 18px; } } @media screen and (max-width: 320px) { .rw-sentence { font-size: 9px; } } 

 <link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'> <section class="rw-wrapper"> <div class="rw-sentence"> <span>Ties made for your</span> <div class="rw-words rw-words-1"> <span>outdoor</span> <span>modern</span> <span>vintage</span> <span>garden</span> <span>nautical</span> <span>modern</span> </div> <span class="after"> wedding</span> </div> </section> 

Answer 1

I forked your pen here .

I removed most margin and padding and here is what I have ( I commented what I did in the code ) :

.rw-sentence {
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);

  /* max-content make the width fit the content "at is largest" (without wrap) */
  /* this allow margin: 0 auto; to center it without white space 
     (It fit the box to the text and center the box) */
  width: max-content;
  margin: 0 auto;
  /* This is also necessary, otherwise you'd have to compensate for the difference
     in height with the container one way or another */
  height: 100%;
}

.rw-sentence span {
  color: #333;
  font-size: 200%;
  /* I fiddled to find the right line height to fit the height of the container */
  /* not sure that's "best practice" but it work :) */
  line-height: 140%;
  font-weight: 400;
 }

Edit

Read afterward about the responsive issue.

html {
  /* define a root font-size */
  /* using unit like vw (a % of the width of the viewport 
     or vmax (a % of the largest between the height and width of the viewport
     can make your design more fluid as it will adjust with the device viewport */

  font-size: 16px;
}

/* I set this container font-size to "1 time the root font-size" 
   The font size in your span (200%) is 200% of this font-size here 
   If you use 'rem' for other length (like width, height ..) it will still
   be representing the root font-size (here x time 16px) */

.rw-sentence {
  font-size: 1rem;

/* This is the values I chose for the media queries but feel free to 
   play around with those values, trying 'vw', 'vmax', using rem ...*/

@media screen and (max-width: 860px) {
  html {
    font-size: 10px;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 8px;
  }
}

Answer 2

you have to just edit the following css code

.rw-sentence {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 16px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 12px;
  }
}

and never use font size less then 12px in mobile view.

Answer 3

Try this. Update this CSS

rw-sentence #Class
.rw-sentence {
margin: 0;
text-align: center;;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

Answer 4

Apply Flexbox layout to the .rw-wrapper div. Then the contents can easily be centered using align-items and justify-content .

.rw-wrapper {
  display: flex; /* turn this into a `flexbox` container */
  align-items: center; /* aligns content vertically */
  justify-content: center; /* aligns content horizontally */
}

A great resource on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 .rw-wrapper { border: 1px solid blue; /* just so you can see the div in question easier, remove this */ display: flex; /* turn this into a `flexbox` container */ align-items: center; /* aligns content vertically */ justify-content: center; /* aligns content horizontally */ width: 80%; position: absolute; text-align: center; margin: 110px auto 0 auto; font-family: 'Playfair Display'; font-weight: 600; padding: 10px; } .after { margin-left: 134px; } .rw-sentence { margin: 0; text-align: left; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } .rw-sentence span { color: #333; font-size: 200%; font-weight: 400; } .rw-words { display: inline; text-indent: 10px; } .rw-words-1 span { position: absolute; opacity: 0; overflow: hidden; color: #0076bb; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #0076bb; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #0076bb; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #0076bb; } .rw-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #0076bb; } .rw-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #0076bb; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media screen and (max-width: 768px) { .rw-sentence { font-size: 18px; } } @media screen and (max-width: 320px) { .rw-sentence { font-size: 9px; } } 

 <link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'> <section class="rw-wrapper"> <div class="rw-sentence"> <span>Ties made for your</span> <div class="rw-words rw-words-1"> <span>outdoor</span> <span>modern</span> <span>vintage</span> <span>garden</span> <span>nautical</span> <span>modern</span> </div> <span class="after"> wedding</span> </div> </section> 

Answer 5

You could use CSS Grid for this, all you need to change in your code is as below and it will work!

.rw-wrapper {
  display: grid;
  width: 100%;
  height: 100vh;
}

.rw-sentence {
  margin: auto;
  max-width: 300px;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

Happy coding. :)

Answer 6

Use left: 50%; with transform: translateX(-50%); to center the absolutely positioned element regardless of its width . And do not mention any width for <section class="rw-wrapper"> .

Also, you don't have to reduce font-size so drastically for mobile resolutions. I Have not reduced it at all. See below:

 .rw-wrapper { position: absolute; left: 50%; transform: translateX(-50%); top: 110px; font-family: 'Playfair Display'; font-weight: 600; padding: 10px; } .after { margin-left: 134px; } .rw-sentence { margin: 0; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); } .rw-sentence span { color: #333; font-size: 200%; font-weight: 400; } .rw-words { display: inline; text-indent: 10px; } .rw-words-1 span { position: absolute; opacity: 0; overflow: hidden; color: #0076bb; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } .rw-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #0076bb; } .rw-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #0076bb; } .rw-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #0076bb; } .rw-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #0076bb; } .rw-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #0076bb; } @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px); } 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @media screen and (min-width: 576px) { .rw-wrapper { white-space: nowrap; } } 

 <link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'> <section class="rw-wrapper"> <div class="rw-sentence"> <span>Ties made for your</span> <div class="rw-words rw-words-1"> <span>outdoor</span> <span>modern</span> <span>vintage</span> <span>garden</span> <span>nautical</span> <span>modern</span> </div> <span class="after"> wedding</span> </div> </section> 

Answer 7

I would recomend using style="margin-left: 10px" just inside your <span> so that it looks like:

<span style="margin-left: 10px">

And then just change the ten pixels until the text is centered. I tried to use align='center' and text-align but they do not work.