Containing text in circle

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
Design A Button Last step page 6

https://www.codecademy.com/courses/web-beginner-en-UuBLw/0/6?curriculum_id=50579fb998b470000202dc8b

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
How do i contain text inside the circle? Ive tried text-align and margin:auto.

```
	<div>
		<a href="https://www.codecademy.com/"> codecademy</a>
	</div>

div {
height: 100px;
width: 100px;
border-color: #6495ED;
background-color: #BCD2EE;
border-style: solid;
border-width: 2px;
border-radius: 50px;
margin: auto;
text-align: center;

}

a {
text-decoration: none;
font-family: impact;
text-align: center;
}

<do not remove the three backticks above>

I cant do it for circle but was able to center it using padding and making it rectangle shape with curved edges

div {
height: 25px;
** width: 100px;**
border-color: #6495ED;
background-color: #BCD2EE;
border-style: solid;
border-width: 2px;
border-radius: 50px;
margin: auto;
text-align: center;
padding: 2%;
}

a {
text-decoration: none;
font-family: impact;
text-align: center;
}

1 Like

It would be easiest to use [quote]
text-overflow: hidden;
[/quote]

In the div’s css.

This hides any text that goes over the border of the div.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.