Question: I tried the below code wherein I wanted to center a link , I dont know why these 2 below piece of code didnt work

```
Code1:

<span class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</span>​

Code2:

  <a href="http://www.example.com" style="text-align:center">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The piece of code which worked was:
<div class="my-class">
  <a href="http://www.example.com">example</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>​

```

Could you please tell me why the above 2 codes didnt work?

Answer: 
`span` and `a` elements do not behavior as blocking element because they are supposed to be used inline. You either will need to set it by setting up a display and width attribute or wrapping it around a parent. Instead, you could use a `ul>li>a` hierarchy and set their attributes properly.

```css
.aBox {
  display: block;
  width: 200px;
  text-align: center;
  background-color: lightyellow;
}

.notBox {
  background-color: lightblue;
  text-align: center;
}
```

```html
<span class="aBox">
  <a href="#">Hey, it's a link</a>
</span>

<span class="notBox">
  <a href="#">Hey, it's a link</a>
</span>
```
A span element is an in-line element which is only as wide as its content. Whereas a div element is a block level element and will be as wide as the page or its containing div.

When using the `text-align: center;' property, you must place it on the element containing the element that you want to center.