CODEWITHSUNDEEP
htmlcsscentering
user7455273
user7455273

Reputation:

How To Center Text Inside Of A CSS Shape

I am trying to make a homepage for some work and I want to make a nice little button that says 'Home'. However, I am not to the point of implementing the onclick yet so don't worry about that. I tried making the shape that I want.

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
}
<div id = "home">Home</div>

Again, I am trying to center the text 'Home' inside of the shape so it looks like it is in the middle of it.

Upvotes: 1

Views: 7027

Answers (5)

Mamta Thakur
Mamta Thakur

Reputation: 147

You can use line-height for this which also works fine. Here is an example, i hope it will help you. 

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
}
<div id = "home">Home</div>

Upvotes: 1

Simrandeep Singh
Simrandeep Singh

Reputation: 585

You can use the display:flex approach to center the text from top and left.

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
  display:flex;
  justify-content:center;
  align-items:center;
}
<div id="home">Home</div>

Upvotes: 1

Iulian Iulian
Iulian Iulian

Reputation: 66

I think flexbox might help you, check this code: 

#home{  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}
<div id = "home">
  <span>Home</span>
</div>

Let me know if this helps you.

Upvotes: 5

Arjan Knol
Arjan Knol

Reputation: 940

You can use display table:

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 25px;
  display: table; 
}
p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;
}
<div id = "home">
  <p>Home</p>
</div>

Upvotes: 0

Steve K
Steve K

Reputation: 9055

Instead of using height just use line-height

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 200px;
  line-height: 100px;
  text-align: center;
  font-size: 25px;
}
<div id = "home">Home</div>

Upvotes: 3

Related Questions