0 points
Submitted by Charles
over 9 years

How to center text inside button without altering button size.

So far there are no questions about this section, but I will just couch this. Anyways, I am having trouble getting my text to appear at the very center of the button without altering the padding to such a significant degree that the button grows to a way bigger size than it was when it started out. Any suggestions about this? My code should be exactly what the exercises instructed the user to do.

On a side note, I used text-align in the div tag in the index.html window, but this only centers it in relation to the right and left sides. I want to also center it in relation to the top and bottom.

Answer 50c6f1ff61201be5010021dd

4 votes

Permalink

It’s all relative to your button size. I’m still learning all the elements, but you should try setting your line-height to different sizes in perspective to your font size and radius.

For instance I used a 100x100 x100% circle with a 1.5em text size.
My line-height:100px; centered the text perfectly.

Here’s an example if it helps make sense.

div {
height: 100px;
width: 100px;
border-radius: 100%;
background-color: red;
border: 10px solid #990000;
box-shadow: 4px 4px 4px #999;
font-weight: bold;
font-size: 1.5em;
text-align: center;
vertical-align: middle;
color: white;
line-height: 100px; /*or you could use 4em*/
}

It would be easier to judge using a text size in pixels instead of percentages (em).

points
Submitted by Matthew E. Everly
over 9 years

Answer 50c916471b77c79d5300032a

1 vote

Permalink

text-align: center; margin: auto;

points
Submitted by Marangely-Ivan Fp
over 9 years

Answer 513f45570e03cf80350003f7

0 votes

Permalink

The difference is in his index file. He uses a line break <br/> before his text. There are two lines of text being displayed, not one, which, because he uses ems, centers the text vertically.

points
Submitted by Jacques
over 9 years

Answer 52b3508a282ae369900035a7

0 votes

Permalink

I got adding line-height to work.

points
over 8 years

Answer 50c2c182fd40c292e6002d79

-1 votes

Permalink

Try “vertical-align: middle”.

points
Submitted by jonnhymatos
over 9 years

Answer 50d0807e6da1757135004d45

4 votes

Permalink

I’ve discovered that vertical-align doesn’t normally work with divs, but if you change the display style to table-cell then it does. So adding:

text-align: center;
display:table-cell;
vertical-align:middle;

to the style tab div should centre everything, even lines split to fit the fixed width of the box.

points
Submitted by pTd
over 9 years