Inorder to align say 2 text elements left and right on the same line using a single DIV tag, we need to
1) use the "style" property of the DIV tag and include "position: relative; text-align: center; " in it. see code below.
<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;"> </div>
2) for text that needs to be left aligned, again use the "style" property and include "position: absolute;left: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;left: 0;padding:10px".
see code below.
<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>
3) for text that needs to be right aligned, again use the "style" property and include "position: absolute;right: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;right: 0;padding:10px".
see code below.
<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>
Complete code.
<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;">
<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>
<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>
</div>
1) use the "style" property of the DIV tag and include "position: relative; text-align: center; " in it. see code below.
<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;"> </div>
2) for text that needs to be left aligned, again use the "style" property and include "position: absolute;left: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;left: 0;padding:10px".
see code below.
<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>
3) for text that needs to be right aligned, again use the "style" property and include "position: absolute;right: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;right: 0;padding:10px".
see code below.
<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>
Complete code.
<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;">
<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>
<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>
</div>
No comments:
Post a Comment