Center Href And Image Within Div And Remove Image Border

Question

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:

Baca Juga

 img {border:0;}

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

.make-main img {border:0;}

Solution 4:

http://jsfiddle.net/a3GrP/

<div class="center-left">               
        <div class="new rounded">
        <span class="inline">TEXT</span><img class="make-main">
            </div>
</div>

.make-main {    
    width: 28px;
    height: 28px;   
    border-color: none;
    background: white url('http://imgur.com/Iz7GKQf') right center no-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: 1px solid #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

Html5 Tech

Center Href And Image Within Div And Remove Image Border

Solution 2:

Solution 3:

Solution 4:

Solution 5:

Post a Comment for "Center Href And Image Within Div And Remove Image Border"