0

I'm struggling with this one:

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

Fiddle

2 things happen here. First, I'm trying to vertically center image and text within div, which doesn't want to work very well, for some reason text is pushed to the bottom while image to the top.

Second mystery thing that is happening is that grey frame around image, and I don't have idea where it comes from. If I use <img src= > within html with the link to the image though, grey frame disappears.

Any help will be greatly appreciated

Pete
  • 57,112
  • 28
  • 117
  • 166
user3210787
  • 137
  • 7
  • You should post your CSS also here. – pzin Jul 30 '14 at 11:27
  • [like this?](http://jsfiddle.net/peteng/DS63C/6/) – Pete Jul 30 '14 at 11:27
  • Pete, exactly like this. Please post your answer so I can approve it. Is there any reason by the way why image url had to be removed from css to html body? I didn't have that problem with other div/img combinations – user3210787 Jul 30 '14 at 11:31
  • @user3210787, if you are going to use an image tag it's best to use the src too rather than css. If you are wanting to make a sprite you should probably use an empty span tag, also if you use the background css (with the white) your arrow won't appear. Answer added – Pete Jul 30 '14 at 12:02

6 Answers6

0

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.

Harry
  • 3,031
  • 7
  • 42
  • 67
0

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-main img {border:0;}
James
  • 176
  • 1
  • 4
  • 16
0

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?

Pavlo Lisovyi
  • 33
  • 5
0

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

Community
  • 1
  • 1
pareshm
  • 4,874
  • 5
  • 35
  • 53
0

if you vertical align both your image and text to the middle:

HTML

<div class="center-left">
    <div class="new rounded"> 
        <span class="inline">TEXT</span>
        <img class="make-main" src="http://imgur.com/Iz7GKQf.png" />
    </div>
</div>

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

Pete
  • 57,112
  • 28
  • 117
  • 166
-1

they gray border is because, it is only a link to the image page. So from the embed code you have to get the exact image link with extensioni

carrieat
  • 82
  • 5