How do I put texts that are in two different font sizes at the center of a webpage?

Question

This is my HTML code:

    span {
      font-family: 'Lovehearts XYZ';
      text-align: center;
    }


    @font-face {
        font-family: 'Lovehearts XYZ';
        src: url('LoveheartsXYZ.woff2') format('woff2'),
            url('LoveheartsXYZ.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    <span style = "font-size: 70px;">Hi, I am *Name*</span></br>
            <span style = "font-size: 40px;">*Occupation*</br>
            *Hobbies*</br>
            *Facts about me*
    </span>

As you can see, I used two "spans" but both of them are in different font sizes. I want this chunk of texts to be placed at the center of the webpage. How can I modify the code to do that?

Vertical or horizontal center? – Wais Kamal Jan 21 '21 at 06:20 — Wais Kamal, Jan 21 '21 at 06:20
Do you want to center the horizontally ? – Jan 21 '21 at 06:20 — , Jan 21 '21 at 06:20
@WaisKamal vertical and horizontally – Jan 21 '21 at 06:51 — , Jan 21 '21 at 06:51

score 1 · Answer 1 · answered Jan 21 '21 at 06:24

1

span {
            font-family: 'Lovehearts XYZ';
            display:block;
            text-align: center;
        }

<span style = "font-size: 70px;">Hi, I am *Name*</span></br>
        <span style = "font-size: 40px;">*Occupation*</br>
        *Hobbies*</br>
        *Facts about me*</span>

span {
            font-family: 'Lovehearts XYZ';
            text-align: center;
        }

answered Jan 21 '21 at 06:24

shajad sheikh

41
5

Welcome to StackOverflow. While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. Have a look here → [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Federico Baù Jan 21 '21 at 07:37

score 0 · Answer 2 · answered Jan 21 '21 at 06:22

@font-face {
  font-family: 'Lovehearts XYZ';
  src: url('LoveheartsXYZ.woff2') format('woff2'), url('LoveheartsXYZ.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

span {
  font-family: 'Lovehearts XYZ';
  text-align: center;
  display: inline-block;
  width: 100%;
}

<span style = "font-size: 70px;">Hi, I am *Name*</span></br>
        <span style = "font-size: 40px;">*Occupation*</br>
        *Hobbies*</br>
        *Facts about me*</span>

score 0 · Answer 3 · answered Jan 21 '21 at 06:22

Just wrap the span with <div style='text-align:center;'></div>

@font-face {
  font-family: 'Lovehearts XYZ';
  src: url('LoveheartsXYZ.woff2') format('woff2'), url('LoveheartsXYZ.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

span {
  font-family: 'Lovehearts XYZ';
  text-align: center;
}

<div style="text-align: center;">
<span style="font-size: 70px;">Hi, I am *Name*</span></br> </span>
<span style="font-size: 40px;">*Occupation*</br>
        *Hobbies*</br>
        *Facts about me*</span>
</div>

score 0 · Answer 4 · answered Jan 21 '21 at 06:26

You can create a div and make all contain inside that div and just make text align of that div center

<div class="contain">      
<span style = "font-size: 70px;">Hi, I am *Name*</span></br>
        <span style = "font-size: 40px;">*Occupation*</br>
        *Hobbies*</br>
        *Facts about me*</span>
</div>
.contain{
  text-align: center; // this will align horizontally .
    vertical-align: middle;// this will align vertically . 
}

How do I put texts that are in two different font sizes at the center of a webpage?

4 Answers4