center element directly below and in the middle of text

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.

score 2 · Answer 1 · answered Feb 22 '18 at 06:26

2

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;
}

a {
  display:inline;
  position:relative;
  }

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

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

answered Feb 22 '18 at 06:26

Suresh Ponnukalai

13,820
5
34
54

gave you an upvote because this is an awesome answer that totally works, ended up implementing the flexbox answer though – adamscott Feb 22 '18 at 06:45
1

:) it is all about our need. – Suresh Ponnukalai Feb 22 '18 at 06:50

VXp · Accepted Answer · 2018-02-22T08:11:32.140

1

You can do it easily with the Flexbox:

a {
  display: inline-flex; /* takes only the contents width; you can also use "flex" (100% width) */
  flex-direction: column; /* stacks flex-items (children) vertically */
  align-items: center; /* centers them horizontally */
}

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

edited Feb 22 '18 at 08:11

answered Feb 22 '18 at 06:41

VXp

11,598
6
31
46

score 0 · Answer 3 · answered Feb 22 '18 at 06:19

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>

Athul Nath · Answer 4 · 2018-02-22T06:34:03.353

0

You could do the following css

a {
    display: inline;
    position: relative;
}
a div {
    display: inline;
    position: absolute;
    top: 15px;
    width:100%;
    text-align:center;
}

PS:div inside anchor tag is not good method Is putting a div inside an anchor ever correct?

edited Feb 22 '18 at 06:34

answered Feb 22 '18 at 06:23

Athul Nath

2,536
1
15
27

If he change the `div` text then this solution won't work. – Suresh Ponnukalai Feb 22 '18 at 06:28
yeah thats why i have commented margin-left should be half width of conent div – Athul Nath Feb 22 '18 at 06:29
if he don't know that the div width then again it will be a problem. you can make it simple like in my answer. – Suresh Ponnukalai Feb 22 '18 at 06:31

center element directly below and in the middle of text

4 Answers4