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;
}@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>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>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 .
}
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?
Do you want to center the horizontally ?
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 →