Next.js Discord

Discord Forum

how do i make these both in same line?

Answered
Black carpenter ant posted this in #help-forum
Open in Discord
Avatar
Black carpenter antOP
hey, i have a small ques. im a beginner in react and it's the only react-related community i'm in 
<span>links</span>
          <span>
            <WordRotate
              className="text-5xl font-extrabold dark:text-white"
              words={["shorter.", "readable.", "stand out."]}
            />
          </span>

how do i make these both in same line?
Answered by B33fb0n3
wrap it inside a div and give the div the css "display: flex":
<div className='flex justify-center items-center'>
  <span>links</span>
          <span>
            <WordRotate
              className="text-5xl font-extrabold dark:text-white"
              words={["shorter.", "readable.", "stand out."]}
            />
          </span>
</div>
View full answer

5 Replies

Avatar
@Black carpenter ant hey, i have a small ques. im a beginner in react and it's the only react-related community i'm in js <span>links</span> <span> <WordRotate className="text-5xl font-extrabold dark:text-white" words={["shorter.", "readable.", "stand out."]} /> </span> how do i make these both in same line?
Avatar
B33fb0n3
wrap it inside a div and give the div the css "display: flex":
<div className='flex justify-center items-center'>
  <span>links</span>
          <span>
            <WordRotate
              className="text-5xl font-extrabold dark:text-white"
              words={["shorter.", "readable.", "stand out."]}
            />
          </span>
</div>
Answer
Avatar
@B33fb0n3 wrap it inside a div and give the div the css "display: flex": tsx <div className='flex justify-center items-center'> <span>links</span> <span> <WordRotate className="text-5xl font-extrabold dark:text-white" words={["shorter.", "readable.", "stand out."]} /> </span> </div>
Avatar
Black carpenter antOP
<div className="flex justify-center">
            links
            <span>
              <WordRotate
                className="text-5xl font-extrabold dark:text-white"
                words={["shorter.", "readable.", "stand out."]}
              />
            </span>
          </div>
Image
fixed
thank you!
Avatar
B33fb0n3
happy to help