CSS: Putting H2 on left and link on right of same line
Firstly, the solution using flex which handles the issue of vertically centering the link:
...
<style>
div {
background: #dbdbdb;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
...
<body>
<div>
<h2>H2</h2>
<a href="#">Some link</a>
</div>
...
---------------
My earlier attempts were using float for the link element. [I wanted to use float to get some exposure to it as the CSS tutorial I went through did not cover it IFIRC or maybe had very short coverage of it. Note that the tutorial has extensive coverage of flex and grid.]
Putting link on same line with H2: Code that partially worked for me:
<div>
<h2>Blogger Blog Feed to HTML Book</h2>
<a
href="https://raviswdev.blogspot.com/2024/04/barebones-blogger-blog-feed-to-html.html"
target="_blank"
class="float-right vertically-center"
>About</a
>
</div>
----
IFIRC, above code worked without the div element too.
But the issue was that the About link was not vertically centered.
Ref: How to put span same line with h2?, https://stackoverflow.com/questions/59003354/how-to-put-span-same-line-with-h2
....
Vertically centering the span in same line with h2:
Refs: https://www.w3docs.com/snippets/css/how-to-vertically-align-inline-inline-block-elements.html , https://www.w3docs.com/tools/code-editor/14003
The above example works as is but when float:right; CSS is specified, it does not work.
Looks like this is an issue others have faced: https://stackoverflow.com/questions/42146618/how-to-get-floatright-button-to-vertically-align-in-the-middle , https://www.sololearn.com/en/Discuss/2861553/how-to-apply-vertical-alignment-for-our-float-element .
Comments
Post a Comment