CODEWITHSUNDEEP
css
xarlap
xarlap

Reputation: 157

Put div in center

I have a problem. This is my code:

<body>
    <div class="imerologio">
        <div id="imerologio-mistika">    
            <a href="foo"><img src="#"></a>
        </div>

        <div id="imerologio-xarti">    
            <a href="foo"><img src="#"></a>
        </div>
    </div>

And my css is:

.imerologio{
    display: inline-block;
    width: 100%;
}

#imerologio-mistika{
    background: url("../images/imerologio/mistika.png") no-repeat;
    float:left;
}

#imerologio-xarti{
    background: url("../images/imerologio/xarti.png") no-repeat;
    float:left;
}

I wand to center the inside divs, but i can't. Any help?

Upvotes: 1

Views: 61

Answers (1)

emmanuel
emmanuel

Reputation: 9615

You have to remove floats, set display: inline-block to items and text-align: center to container. 

.imerologio {
  text-align: center;
  width: 100%;
}
#imerologio-mistika {
  background: url("../images/imerologio/mistika.png") no-repeat;
  display: inline-block;
  width: 50%;
}
#imerologio-xarti {
  background: url("../images/imerologio/xarti.png") no-repeat;
  display: inline-block;
  width: 50%;
}
<div class="imerologio">
  <div id="imerologio-mistika">
    <a href="foo">
      <img src="#">
    </a>
  </div><!--

  --><div id="imerologio-xarti">
    <a href="foo">
      <img src="#">
    </a>
  </div>
</div>

Upvotes: 1

Related Questions