CODEWITHSUNDEEP
htmlcss
Laz Karimov
Laz Karimov

Reputation: 714

Move image to the center

I am trying to move the image right before the text inside the same div. For div I give CSS text-align:center, but it only affects on the text. How to move the image right before the text?

http://jsfiddle.net/j5nwS/1/

Upvotes: 0

Views: 96

Answers (4)

Praveen
Praveen

Reputation: 56501

Add the below css to the ui-icon class:

EDIT:

.ui-icon {        
    display: inline-block;  
    position: relative;
}

Updated Fiddle

Upvotes: 0

lexasss
lexasss

Reputation: 302

Remove "overflow: hidden; position: absolute; " and change "display" to "inline-block":

.ui-icon {
  background-image: url("https://raw.github.com/gallery/gallery3-vendor/9a462c4c81c755cc4ff84c856d4c0f6ea47b9cd8/ui.themeroller/modified/images/ui-icons_217bc0_256x240.png");
  height: 16px;
  width: 16px;
  background-repeat: no-repeat;
  overflow: hidden;  
  display: inline-block;
}

Upvotes: 0

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Set span' display property to inline-block.

JSFiddle: http://jsfiddle.net/j5nwS/14/

Upvotes: 2

Keith
Keith

Reputation: 4147

If you add this:

    .ui-icon-carat-1-s{
    position:relative;
    display:inline-block;
    }

this will work. http://jsfiddle.net/j5nwS/6/

Upvotes: 0

Related Questions