CODEWITHSUNDEEP
htmlcssstylescenterhtml-heading
codework
codework

Reputation: 35

How can I wrap a heading to two lines and center it?

h1 {
  text-align: center;
}
<h1>Reliable, efficient delivery Powered by Technology</h1>

What I want:-

enter image description here

I tried adding width but then it pushes the heading to the left. How can i achieve this multi-line heading in center.

Upvotes: 0

Views: 7216

Answers (3)

user15336984
user15336984

Reputation:

You could try something like this-

#smallheader{
font-size: 50px;
margin-right: 50%;
text-align: center;
margin-left: 50%;
}
<div id="smallheader">This is my text that should be on the next line.</div>

You can just change the margin-right: your amount;

Upvotes: 0

isherwood
isherwood

Reputation: 61055

You claim that using width doesn't work, but it sure does (along with a standard centering mechanism):

h1 {
  text-align: center;
  width: 400px;
  margin: 0 auto;
}
<h1>Reliable, efficient delivery Powered by Technology</h1>

This isn't a good approach, though, since it depends on font and container sizes. Better to just break the line explicitly:

h1 {
  text-align: center;
}
<h1>Reliable, efficient delivery<br>Powered by Technology</h1>

Upvotes: 0

fromaline
fromaline

Reputation: 527

The easiest way to achieve what you want is to add <br> - The Line Break element.

Or you may do something like this, if you prefer css way https://codepen.io/fromaline/pen/WNpEgXR

h1 {
  text-align: center;
}
<h1>Reliable, efficient delivery <br> Powered by Technology</h1>

Upvotes: 1

Related Questions