Background Icon center alignment Issue

HTML & CSS
, ,
1

I need text center align and below that Icon should be center align,
I am trying to center align my background Icon but it’s pushing left side of the div.

HTML:

<div class="col-lg-2 " id=''> 
              <div class="cartPrice">
                             $49.95/mo <span class="cartIcon"></span>
              </div>
</div>

CSS:

.cartPrice{
    padding: 5px 0 5px 0;
    text-align:center;
}

.cartIcon{
background-image:url('../images/cartIcon.png');
width:48px;
height:42px;
display:block;
vertical-align:middle;
margin-top: 5px;
text-align:center;
}

.cartPrice span{
text-align:center;
background-position:center;
}
2

I cant see your htmll so im just spitballing on what icon your talking about. But in your css .cartIcon class you have display block which means you will need to align it with margin.

.cartIcon{
    background-image:url('../images/cartIcon.png');
    width:48px;
    height:42px;
    display:block;
    vertical-align:middle;
    margin: 5px auto 0 auto;
   text-align:center;
}
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.