Padding Images With Absolute Position

Problems:

We want to display something like this.

The container has images on the left and right, with absolute position. The contents text is in the middle.

 

Solution:

We have an <a> as the container. A <span>for the shopping chart image and <b> for the arrow right. The html code would be:

 

                 <a href="#">
                    <span class="chart-img"></span>
                    购物车<span class="chart-item-num">0</span>件
                    <b></b>
                </a>

 

 /*leave padding on left and right for the two images. Need to set position to relative */
a {
    background: none repeat scroll 0 0 white;
    border: 1px solid #D8D8D8;
    height: 18px;
    line-height: 17px;
    width: 66px;
    padding: 0 16px 0 25px;/*WITH THE PADDING TO DISPLAY IMAGES*/
    position: relative;/*WITH THIS, THE CONTAINED IMAGE CAN USE ABSOLUTE POSITION*/
    bottom: 2px;
}

/*Use position:absolute. Display the shopping chart at (6,3) of the parent relative positioned a*/
 .chart-img {
    position: absolute;
    left: 6px;
    top: 3px;
    width: 14px;
    height: 11px;
    background: url(../images/T1CCRNXmRFXXXXXXXX.png) no-repeat -100px -21px;
}

/*A tricky method to display the arrow. Can use image too.*/
a b {
    border-color: #666666 #FFFFFF #FFFFFF;
    right:6px;
}

 

Related Patterns:

Padding Images With Background Image