Sunday, 2 August 2015

html align , left, right or both


Two types of align for components and texts.

Text:

css:

div {
    text-align: justify;
    text-justify: inter-word;
}


http://www.w3schools.com/cssref/css3_pr_text-justify.asp






html attribute:

<p align="right">This is some text in a paragraph.</p>




Component


<div align="center">
  This is some text!
</div>





use css:
http://www.w3schools.com/css/css_align.asp

Center Align - Using margin

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Use margin: auto;, to horizontally center an element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins:

Example

.center {
    margin: auto;
    width: 60%;
    border:3px solid #8AC007;
    padding: 10px;
}




Left and Right Align - Using position

One method of aligning elements is to use position: absolute;:

Example

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}



Left and Right Align - Using float

Another method of aligning elements is to use the float property:

Example

.right {
    float: right;
    width: 300px;
    border:3px solid #8AC007;
    padding: 10px;
}




left-right align:

table:





float



http://jsfiddle.net/CH9K8/



http://stackoverflow.com/questions/727958/what-is-the-best-way-to-left-align-and-right-align-two-div-tags






in short:

if you use css, use float

if you don't want use css, use align in html

supported html tags:

td
div
p
...


1. if you want implement two divs left-right align in a div, then you have to use float


2. pure align in html with css, only td can do.




    <div>
        <table width="100%">
          <tr>
            <td style='align:left;'>
                <button class="btn btn-inverse btn-lg btn-login button" type="submit">
                    Sign up
                </button>
               
            </td>
            <td align="right">
                <a class="btn btn-default btn-lg btn-register button" href="/login">
                    Login
                </a>
            </td>
          </tr>
        </table>
    </div>











No comments:

Post a comment