Center Href And Image Within Div And Remove Image Border

I'm struggling with this one:

TEXTCopy

CSS

.make-main {
    width: 28px;
    height: 28px;
    border-color: none;
    vertical-align:middle;
}
.inline {
    display: inline-block;
    vertical-align: middle;
}

It should work: Example

Example using background image

Solution 2:

Is this what you are after Fiddle

To centre the text I added -float:

.make-main {    
    position: relative;
    width: 28px;
    height: 28px;   
    float:right;
    background: white url(http://imgur.com/Iz7GKQf) right center no-repeat;
}

And

.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;    
    height:30px;
}

As far as the grey frame is concerned, I am not sure why the grey frame is appearing.

Solution 3:

How about this, put this in your CSS file:

.new rounded
{
   margin-left: auto;
   margin-right: auto;
}

That's for centering the image inside a div.

And to remove the image border, also put this:

img {border:0;}

But since you have a class attached to your image element, this might be better:

.make-mainimg {border:0;}

Solution 4:

http://jsfiddle.net/a3GrP/

<divclass="center-left"><divclass="newrounded"><spanclass="inline">TEXT</span><imgclass="make-main"></div></div>.make-main {    
    width:28px;height:28px;border-color:none;background:whiteurl('http://imgur.com/Iz7GKQf')rightcenterno-repeat;
}

.inline {
    display:inline-block;height:100%;vertical-align:middle;
}

.rounded {
    -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;    
}

.center-left {  
    float:left;height:30px;}

.new {  
    width:200px;text-align:center;cursor:pointer;border:1pxsolid#3981d2;      
}

Here you go.

Vertical align middle works based in baseline. So, you need line-height for your parent element.

About grey borders – that's only on jsfiddle?

Solution 5:

Grey border comes to img tag its default behavior of chrome browser So we cannot remove that grey border Thanks You can refer following link Stackoverflow

Share