# Vertical-align is not working!

**URL:** <https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680>\
**Category:** General\
**Created:** [November 6, 2019, 7:27pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680 "2019-11-06T19:27:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![amcfarlane52](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@amcfarlane52](https://forum.freecodecamp.org/u/amcfarlane52)\
**Post date:** [November 6, 2019, 7:27pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/1 "2019-11-06T19:27:32Z")

</div>

Hi all,

Goal: aligning some anchor text nicely with the text on either side of the anchor.

I have done a LOT of googling as to how people have done this (it should not be tough).

My current approach that I would like to use, but is not working, is the table approach with vertical-align. I would prefer to leave line height alone, as I would rather not work with explicit pixel values when aligning elements.

See my mark-up here:

```auto
<div style="display: table; margin-top: -15px;">
   <div style="display: table-row;">
      <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
         <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;">Click 
         </p>
      </div>
      <div style="display: inline-block; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden; margin-left: 4px; margin-right: 4px; overflow-wrap: normal; margin-top: 0px; padding-bottom: 0px;">
         <a href="https://hwsathletics.com/roster.aspx?rp_id=10823" style="overflow-wrap: normal; display: block;">here
         </a>
      </div>
      <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
         <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;"> for more information.
         </p>
      </div>
   </div>
</div>

```

Here is a picture of what this looks like:  
 ![40%20AM](https://global.discourse-cdn.com/freecodecamp/original/3X/3/d/3d81ac68434e071bc7a6ad89264c5739f8f0360e.png)

As you can see, the div containing the anchor is floating to the top of the table row. `Note` that the display property of the anchor’s div is inline-block; I tried this after table-cell didn’t work.

Any suggestions? Would prefer to stay away from setting any explicit values. I should be able to accomplish this with table or flex, I just don’t know what I’m doing wrong here.

Thanks in advance!  
-Mack

---

<div class="post-metadata">

**Author:** ![camperextraordinaire](https://avatars.discourse-cdn.com/v4/letter/c/5f9b8f/32.png) [@camperextraordinaire](https://forum.freecodecamp.org/u/camperextraordinaire)\
**Post date:** [November 6, 2019, 7:34pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/2 "2019-11-06T19:34:27Z")

</div>

> [@amcfarlane52](#):
>
> Goal: aligning some anchor text nicely with the text on either side of the anchor.

If you mean by “nicely” that the bottom of the link rests on the same horizontal line as the other text, then why are you using divs like this?

```auto
Click <a href="https://hwsathletics.com/roster.aspx?rp_id=10823">here</a> for more information.

```

You need to provide a bit more context (where this text/link/text sits with respect to other elements), so we understand why the above simple code would not suffice.

---

<div class="post-metadata">

**Author:** ![amcfarlane52](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@amcfarlane52](https://forum.freecodecamp.org/u/amcfarlane52)\
**Post date:** [November 6, 2019, 8:05pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/3 "2019-11-06T20:05:29Z")

</div>

Hi Randell,

My apologies for the lack of clarity.

> [@camperextraordinaire](#):
>
> If you mean by “nicely” that the bottom of the link rests on the same horizontal line as the other text, then why are you using divs like this?

Because I am a web noob! Lol.

> [@camperextraordinaire](#):
>
> You need to provide a bit more context (where this text/link/text sits with respect to other elements), so we understand why the above simple code would not suffice.

This is for my personal website. The content here is on a react-web-tabs panel. I’ve got a title, followed by a line of text, followed by another line of text. The last line of text is the one with the link that I would like to vertically align with the rest of its line.

See below for the mark-up:

```auto
<div style="display: flex; flex-direction: column; margin-left: 15px; overflow-wrap: normal; max-width: 90%; text-align: left; overflow: scroll;">
   <div style="margin-top: 15px; margin-left: 15px;">
      <p style="font-family: &quot;Courier New&quot;, Courier, monospace; display: block; font-weight: bold; font-style: italic; text-decoration: none; font-size: 20px;">
Hobart College Defensive End
      </p>
   </div>
   <div style="overflow-wrap: normal; margin-top: 0px; padding-bottom: 0px;">
      <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;">
Recorded 57 tackles and 5 sacks as a Sophomore.
      </p>
   </div>
   <div style="display: table; margin-top: -15px;">
      <div style="display: table-row;">
         <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
            <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;"> Click
            </p>
         </div>
         <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden; margin-left: 4px; margin-right: 4px; overflow-wrap: normal; margin-top: 0px; padding-bottom: 0px;">
            <a href="https://hwsathletics.com/roster.aspx?rp_id=10823" style="overflow-wrap: normal; display: block;">here
            </a>
         </div>
         <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
            <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;"> for more information.
            </p>
         </div>
      </div>
   </div>
</div>

```

The reason why my mark-up looks so overly complicated is because I’m reading JSON data from a config file and generating my content that way. I really like the approach you’ve displayed above, so I am going to work with my setup and see if I can emulate what you’ve done.

Edit:

Here is an example of the JSON config I am talking about.

```auto
"c-0": {
                "items": {
                  "p-2": {
                    "text": "Click "
                  },
                  "l-0": {
                    "text": "here",
                    "link": "https://hwsathletics.com/roster.aspx?rp_id=10823"
                  },
                  "p-3": {
                    "text": " for more information."
                  }
                }
              }

```

---

<div class="post-metadata">

**Author:** ![amcfarlane52](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@amcfarlane52](https://forum.freecodecamp.org/u/amcfarlane52)\
**Post date:** [November 6, 2019, 8:20pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/4 "2019-11-06T20:20:46Z")

</div>

This worked great. Thank you for the suggestion 👍

```auto
<p style="display: inline;">
Click 
   <a href="https://hwsathletics.com/roster.aspx?rp_id=10823" style="overflow-wrap: normal; display: inline;">here
   </a> for more information.
</p>

```

---

<div class="post-metadata">

**Author:** ![Shraddha\_patel](https://avatars.discourse-cdn.com/v4/letter/s/839c29/32.png) [@Shraddha\_patel](https://forum.freecodecamp.org/u/Shraddha_patel)\
**Post date:** [November 8, 2019, 4:45am UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/5 "2019-11-08T04:45:00Z")

</div>

You can try this code

```auto
<div style="display: table; margin-top: -15px;">
   <div style="display: table-row;">
      <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
         <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;">Click 
         </p>
      </div>
      <div style="display: inline-block; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden; margin-left: 4px; margin-right: 4px; overflow-wrap: normal; margin-top: 0px; padding-bottom: 0px;">
         <a href="https://hwsathletics.com/roster.aspx?rp_id=10823" style="overflow-wrap: normal; display: block; margin: 15px;">here
         </a>
      </div>
      <div style="display: table-cell; vertical-align: middle; float: left; white-space: nowrap; overflow: hidden;">
         <p style="overflow-wrap: normal; display: block; font-weight: normal; font-style: normal; text-decoration: none;"> for more information.
         </p>
      </div>
   </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 2:46pm UTC](https://forum.freecodecamp.org/t/vertical-align-is-not-working/325680/6 "2021-01-16T14:46:02Z")

</div>

Closed on January 16, 2021, 2:46pm UTC