Middle Aligned INLINE : Inline Elements « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Inline Elements

Middle Aligned INLINE

 

<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: yellow;
}

* .extrastyle {
  width: 120px;
  padding: 5px;
  text-align: center;
  border: 1px dotted black;
  background: red;

  position: relative;
  border: 5px solid black;
  background-color: gold;
  left: 0;
}

#myStyle {
  height: 100px;
  top: 0;
  margin-top: auto;
  bottom: 0;
  margin-bottom: auto;
  position: absolute;
  line-height: 100px;
  margin-left: 40px;
  background: pink;
}

</style>
</head>
<body>
<div class="grandContainer"> 
    <div id="myStyle" class="extrastyle">INLINE</div> 
</div> 


</body>
</html>








Related examples in the same category

1.CSS provides the following properties for styling inline boxes:
2.Inline Elements list
3.Inline Box
4.Shrinkwrapped inline block by setting both width and height to auto
5.On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.
6.Block-level elements
7.inline element is floated
8.float inline block becomes block of multiline inline box
9.float inline with block inline padding
10.float inline elements becomes block
11.Middle Offset INLINE
12.Shrinkwrapped Absolute right aligned
13.Stretched Absolute in relative positioned parent