Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  
    <head>
    <title>
       Vertical Center Text
    </title>
    <style type="text/css">
      /*** GLOBAL ***/
      *
      {
          padding: 0;
          margin: 0 auto;
          outline: none;
      }
      
      html, body
      {
          height: 100%;
          font: .9em Arial ,san-serif;
      }
      
      .clear
      {
          clear: both;
      }
      
       ul, li
      {
          list-style: none;
      }   
      
      #container
      {
          min-width: 600px;
          max-width: 1000px;
          width: 85%;
          height: auto;
          min-height: 100%;
          
      }  
            
      fieldset#settings
      {
          margin: 0 auto 20px;
          padding: 10px 0 20px;
          width: 100%;
          height: 100%;
          background: #deebff;
          border: none;
      }
      
      fieldset legend#legend
      {
          float: left;
          padding: 5px 10px;
      }
      
      fieldset#settings div.ul-box
      {
          float: left;
          padding: 10px;
          margin: 0 0 0 10px;
          background: yellow;
      }
      
      div#settings ul
      {
          float: left;
        
      }
      
      fieldset#settings div.ul-box ul li
      {
          /* float: left; */
          color: #666;
        
          margin: 2px;
          padding: 5px 10px;
          background: cyan; 
       
      }
      
      fieldset#settings div.ul-box ul li p
      { 
              float: left;
              background: red;   
          
      }
      
      input#settings-field, textarea#settings-textarea    
      {        
          resize: none;
          overflow: hidden;  
          border: none;
          outline: none;
          padding: 3px;
          margin: 0 5px;
          width: 200px;
          color: #06f;
          font: 14px Arial, sans-serif;     
          background: #fff;
          -moz-border-radius: 0px;
          -webkit-border-radius: 0px;
          border-radius: 0px;
          -moz-box-shadow: inset 0px 1px 2px #aaa;
          -webkit-box-shadow: inset 0px 1px 2px #aaa;
      }
      
      input#settings-field:focus, textarea#settings-textarea:focus  
      {
          background: #FFFFC4;
          /* -moz-box-shadow: 0px 0px 5px #66a3ff; */
          /* -webkit-box-shadow: 0px 0px 5px #66a3ff;  */
      }
​
    </style>
    </head>
  
    <body>
      <div id="container">
        <form name="settings" method="get" id="settings" action=".py">
          <fieldset id="settings"> 
            <legend id="legend">Settings</legend>
            <div class="clear"></div>
            <div class="ul-box">
              <ul>
                <li class="field-title">
                  <p>Name:</p><input id="settings-field" type="text"/>
                </li>
                <li class="field-title">
                  <p>Username:</p><input id="settings-field" type="text"/>
                </li>
                <li class="field-title">
                  <p>Email:</p><input id="settings-field" type="text"/> 
                </li>
                <li class="field-title">
                  <p>Change password:</p><input id="settings-field" type="password"/> 
                </li>
              </ul>
            </div>
            <div class="ul-box">
              <ul>
                <li class="field-title">
                  <p>Website:</p><input id="settings-field" type="text"/> 
                </li>
                <li class="field-title">
                  <p>Description:</p><textarea name="Description" id="settings-textarea" type="text" rows="2" cols="25" wrap="soft"></textarea>         
                </li>
                <li class="field-title">
                  <p>Location:</p><input id="settings-field" type="text"/> 
                </li>
              </ul>
            </div>
            <div class="clear"></div>
          </fieldset>
        </form>
      </div>
    </body>
  
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers