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>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  body {
    font-family: sans-serif;
  }
  
  h1 {
    text-align: center;
    padding-bottom: 60px;
  }
  
  input {
    vertical-align: top;
  }
  
  div {
    width: 1050px;
  }
  
  .line {
       border-top: 2px dashed #ccc;
      border-bottom: 2px dashed #ccc;
  }
​
</style>
</head>
<body>
  
  <h1>Vertical-Align Demo</h1>
  <div>
    <p class="line">
      
      Random text:
      
      <input placeholder="vertical-align: top">
      
      <img src="http://i.imgur.com/MievI.jpg" alt="A cat with a scooter on its ass" width="200" height="130">
    
      <img src="http://i.imgur.com/MievI.jpg" alt="A cat with a scooter on its ass" width="400" height="260">
      
      Some more random text...
    
    </p>
    
    <p style="padding: 50px; text-align: center; width: 50%; margin: auto;"><b>The Input element above has "vertical-align: top" applied to it, so it's aligned to the top of the tallest element on the line (which, in this case, is the big image).</b></p>
  </div> 
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers