#1

  1. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1

    Post How to align with Div


    I can align form with tables. but how to align it with div.
    please also describe.

    PHP Code:
    <form action="signup.php" method="post" /><br />
            <
    label for="username">Username: </label><input type="text" name="username" id="username"/><br />
            <
    label for="email">Email: </label><input type="email" name="email" id="email" /><br />
            <
    label for="password">Password: </label><input type="password" name="password" id="password" /><br />
            <
    label for="conpass">Confirm Password: </label><input type="password" name="conpass" id="conpass" /><br />
            <
    input type="submit" name="submit" value="Sign Up" />
            </
    form
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    I presume you mean align the labels with the inputs horizontally, in which case you need to wrap each set in a div (mainly used just to separate each set and you could add a style to apply more formatting between rows if you wish) and then use display: inline-block on both the labels and input fields.
    Code:
    <form action="signup.php" method="post" />
    <fieldset class="signup-form">
    <div>
            <label for="username">Username: </label><input type="text" name="username" id="username"/>
    </div>
    <div>
            <label for="email">Email: </label><input type="email" name="email" id="email" />
    </div>
    <div>
            <label for="password">Password: </label><input type="password" name="password" id="password" />
    </div>
    <div> 
            <label for="conpass">Confirm Password: </label><input type="password" name="conpass" id="conpass" />
    </div>
    </fieldset>
            <input type="submit" name="submit" value="Sign Up" />
            </form>
    The CSS
    Code:
    .signup-form label, .signup-form input {
      display:inline-block;
    }
    
    .signup-form label {
      width:200px; /* or however wide you want the labels to be */
    }
  4. #3

  5. Join Date
    Sep 2013
    Location
    Lahore, Pakistan
    Posts
    74
    Rep Power
    1

    Unhappy


    Originally Posted by simplypixie
    Code:
      display:inline-block;
    what does it mean. please
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    Sorry I don't have time to write a full tutorial for you on elements of CSS but there is a great article here for you to read.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    18
    Rep Power
    0
    Add align in the <div> tag seems to be capable.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    2
    Rep Power
    0
    http://html-css.happycodings.com/div...r-justify.html

    Code:
    Div tag text-align left right center justify
    
    <?xml version="1.0" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
      <title>Div Tag Text-align Left Right Center Justify</title>
    <style type='text/css'>
    body {
       color:blue;
       background-color:pink;
       font-family:arial, sans-serif; 
       font-size:16px;}
    
    div {width:800px;margin:25px;}
    
    .leftAlign {text-align:left;}
    .rightAlign {text-align:right;}
    .center {text-align:center;}
    .justify {text-align:justify;}
    </style>
    
    </head>
    
    <body>
    
      <h1>Div Tag Text-align Left Right Center Justify</h1>
      <div class="leftAlign">In love of home, the love of country has its rise. Charles ****ens</div>
      <div class="rightAlign">Treasure the love you receive above all. It will survive long after your good health has vanished. Og Mandino</div>
      <div class="center">All mankind love a lover. Ralph Waldo Emerson</div>
      <div class="justify">Love is all we have, the only way that each can help the other. Euripides</div>
    
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo