I've been struggling to align some HTML elements visually the way I want.
There are two lines of text followed by a link. I'm trying to get the link to be vertically centered between the two lines, rather than just after the second line. Using a table seems like overkill for this task, so I'm looking for another solution.
This was my initial attempt:
<div class="(float right class)">
Line 1<br />Line 2
<a href="#">Link</a>
<div>
However, it ended up looking like this:
Line 1
Line 2 Link
Next, I tried the following approach, which seemed like the logical way to go:
<div class="(float right class)">
<div>Line 1<br />Line 2</div>
<div class="(v align center class)"><a href="#">Link</div>
</div>
Unfortunately, this just resulted in the link being placed on its own line below the two text lines, rather than next to them:
Line 1
Line 2
Link
My goal is to achieve a layout similar to the first example, with the link being vertically centered between Line 1 and Line 2.