I have a layouting problem while using this html/css coding.Actually I want the symbols to be vertically aligned to the center of the div.The second layout is displaying fine with float value set to left on child divs.Whats wrong with the first layout. Any ideas?Here is the code\[code\]<html><head><style type="text/css"> div, p { margin:0; padding:0; } div.wrapper { background: #FFFFFF; border-radius: 3px; padding: 20px; } /* LAYOUT 1 STYLE */ div.list1 div { display: inline-block; } div.thumb1 { border:#3C6BBC 2px solid; border-radius: 2px; width: 120px; height: 120px; } div.symbol1 { font-size: 25px; width: 20px; height: 70px; margin: 2px; text-align: center; padding-top:50px; } /* LAYOUT 2 STYLE */ div.list2 { overflow: hidden; } div.list2 div { float: left; } div.thumb2 { border:#3C6BBC 2px solid; border-radius: 2px; width: 120px; height: 120px; } div.symbol2 { font-size: 25px; width: 20px; height: 70px; margin: 2px; text-align: center; padding-top:50px; }</style></head><body><div class="wrapper" id="layout1"> <h1>MAIN HEADING</h1> <h2>Sub Heading</h2> <div class="list1"> <div class="thumb1"></div> <div class="symbol1"><p>+</p></div> <div class="thumb1"></div> <div class="symbol1"><p>+</p></div> <div class="thumb1"></div> <div class="symbol1"><p>=</p></div> <div class="thumb1"></div> </div></div><div class="wrapper" id="layout2"> <h1>MAIN HEADING</h1> <h2>Sub Heading</h2> <div class="list2"> <div class="thumb2"></div> <div class="symbol2"><p>+</p></div> <div class="thumb2"></div> <div class="symbol2"><p>+</p></div> <div class="thumb2"></div> <div class="symbol2"><p>=</p></div> <div class="thumb2"></div> </div></div></body></html>\[/code\]
How to use CSS “display: inline-block” properly?
- Thread starter Riceman
- Start date