Question

look for division with id shelf and nested division with class inner_div,now the problem is images inside inner_div are not centered after using css class provided below.

CSS CLASS

.inner_div{
  display:inline_block;
  width:20%;
  float:left;
  font-size:10px;
  text-align: center;
}
.inner_div p{
  text-align:center;
  margin-left:2px;
  margin-right:2px;
  /*font-weight:bold;*/
  padding:2px;
  height:35px;
  border-radius:5px;
  color:rgb(255,255,255);
  background-color:rgb(51,51,51);   
 }

Simple structure of my catalog

<div id='shelf'>
  <div class='inner-div'>
  <p>BOOK TITLE<p>
  <img src=''></img> //book cover
  <img src=''></img // available or not
  </div>
  <div class='inner-div'>
  <p>BOOK TITLE<p>
  <img src=''></img> //book cover
  <img src=''></img // available or not
  </div>
  <div class='inner-div'>
  <p>BOOK TITLE<p>
  <img src=''></img> //book cover   // not able to center this two images 
  <img src=''></img // available or not // not able to center this two images 
  </div>
    .......continues till data available in database


</div>
Was it helpful?

Solution

Try this:

.inner_div img {
    display:block;
    margin:auto;
}

OTHER TIPS

Try this. You dint specify any css for the images.May be it shud work

.inner_div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top