Menu
I am trying to align two inline elements, one to the left and one to the right. I'd like to accomplish this without using floats.
In my case, I have a h1, with a span and a link. I'd like the span to align to the left and the link to align to the right.
http://jsfiddle.net/Lkfacta3/
h1>span { text-align: left; } h1>a { text-align: right; } <h1><span>Align me left</span> <a href="">align me right</a></h1>This is the desired result:
964
The style attribute can be used to align html text. Style attributes specify inline styling for an element. The HTML *p style attribute is used with the CSS property text-align for the center, left, and right alignments.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
You can use CSS display:table + display:table-cell . Or, do it with display:inline-block . Note, either way above will make the <a> clickable area larger, wrap it into another <span> if you need to correct that. The display: inline-block; solution worked for me.
If you need to align it to the right, then set margin-left: auto and margin-right: 0; . Basically, to align a block element to one side horizontally, set the margin of that side to 0 and the opposite side to auto.
You can use some flexbox magic:
h1 { display: flex; justify-content: space-between; }<h1> <span>Align me left</span> <a href="">align me right</a> </h1>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
