Page 1 of 1

How can you align the text in the center of a round button and still keep the button round?

Posted: Wed Jul 26, 2017 7:24 pm
by Oldestman57

This is my css:
.round-button-text { height: 100px !important;
background-color: #3498db !important;
width: 100px !important;
border-radius: 80px !important;
border: 5px solid #bee0f3 !important ;
box-shadow: 10px 10px 5px #888888;
font-style:normal;
font-size: 10px;
text-align: center;
white-space: normal;
} Here is the current condition. I have tried padding and floating, button gets out of round.
Image


How can you align the text in the center of a round button and still keep the button round?

Posted: Thu Jul 27, 2017 9:04 am
by Serhii Kulibaba

Hello,

Please see the full example how to center components with CSS here: https://css-tricks.com/centering-css-...


How can you align the text in the center of a round button and still keep the button round?

Posted: Fri Jul 28, 2017 1:13 am
by Oldestman57

Serhii,

Thanks for the link.
Worked great! Image