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:
<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:
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
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?
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.
Hi Randell,
My apologies for the lack of clarity.
Because I am a web noob! Lol.
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:
<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: "Courier New", 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.
"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."
}
}
}
This worked great. Thank you for the suggestion 
<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>
You can try this code
<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>