将div中的href和图像居中并移除图像边框 [英] Center href and image within div and remove image border

问题描述

 < div class =center-left> 
< div class =new rounded> 
< span class =inline>< / span> TEXT< img class =make-main>< / div> 
< / div> b 
 
 
 $ b 
 nofollow>小提琴 
 
 
 
 2件事发生在这里。首先，我试图在div内垂直居中放置图片和文字，因为某些原因文字被推到底部，而图片位于顶部。
 
 
 
发生的第二件神秘事情就是图像周围的灰色框架，我不知道它来自哪里。如果我在HTML中使用< img src => ，但是灰色框架消失。
 
 
 
任何帮助将不胜感激
解决方案
如果您将图片和文字垂直对齐到中间：
 
 $ b 
  HTML   
 
 
 < div class =center -left> 
< div class =new rounded> 
< span class =inline> TEXT< / span> 
< img class =make-mainsrc =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; 
} 
  
它应该有效：示例  
 
 
 使用背景图片的例子 
 
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
解决方案
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

                        
这篇关于将div中的href和图像居中并移除图像边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！