Question: The problem I am trying to solve in my project:

I want to have the selected state of a link in my navbar be a small icon.

I want that icon to sit directly below and in the middle of the navbar link text.

I can't seem to figure it out.

I mimicked some of the css in the project below.

Essentially I am trying to get the text "trying ma best" centered in the middle of the parent "center the text below me relative". 

All of our nav links sit inline, so I don't want to alter the a tag being inline.

<https://jsfiddle.net/6Lk1uqs8/5/>

here is the code in the fiddle:

```
<a href="#">
  center the text below me relative to me
  <div>
    trying ma best
  </div>
</a>

a {
  display: inline;
}

div {
  display: inline;
  position: relative;
  top: 15px;
  right: 50px;
}

```

Any help is greatly appreciated.

Answer: 
You can use `relative` and `absolute` position to achieve the desired results.

```
a {
 display:inline;
 position:relative;
}

div {
  position: absolute;
  top: 15px;
  width:100%; /* instead of this you can use left:0; right:0 also */
  text-align:center;
}

```

```css
a {
  display:inline;
  position:relative;
  }

div {
  position: absolute;
  top: 15px;
  width:100%;
  text-align:center;
}
```

```html
<a href="#">
  center the text below me relative to me
  <div>
    centere insdff
  </div>
</a>
```
not full proof but could be a good starting point. <https://jsfiddle.net/p1er4t2p/>

```
a {
  display: inline-block;
  border:1px solid black;
}

a:after {
  visibility:hidden;
  content:'center';
  display: inline-block;
  position: relative;
  display:flex;
  justify-content:center;
  border:1px solid blue;
}

a:hover::after{
  visibility:visible;
}

<a href="#">
  center the text below me relative to me
</a>

```