填充图像

-2

我试图在标题内的文本旁边添加图像，但图像覆盖了填充。填充图像

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header { 
 
    width: 95%; 
 
    margin: 10px auto; 
 
    padding: 20px; 
 
    border-radius: 8px; 
 
    box-sizing: border-box; 
 
    background-color: blue; 
 
}

<body> 
 
    <header> 
 
    <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px"> 
 
    <h1 style="display: inline-block;"> 
 
     Hi! 
 
    </h1> 
 
    </header> 
 
</body>

我需要他们垂直对齐在一起，并且将图像以停止正对填充的顶部。

这是不同于其他例子在这里stackoverflow因为在这里我的工作与填充。

来源

2017-01-31 Chormi

@DaniSpringer这是对的jsfiddle .. – Chormi

你错过了';'宽度后'：95％' – j08691

@ j08691我固定的，但问题仍然 – Chormi

您可以使用Flex，使文本相邻图像：

div { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
header { 
 
    width: 95%; 
 
    margin: 10px auto; 
 
    padding: 20px; 
 
    border-radius: 8px; 
 
    box-sizing: border-box; 
 
    background-color: white; 
 
}

<div> 
 
    <img src="http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px"> 
 
    <h1>Hi!</h1> 
 
</div>

了解更多关于Flex这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2017-01-31 17:32:22

是的，工作！谢谢，我不知道flex。 – Chormi

@Chormi没问题:) Flex实际上非常酷。我将在我的文章中包含一个关于它的链接。 –

-1

尝试将此添加到您的CSS文件：

h1 {margin-top:10px;}

并添加“ALIGN =左”到

<img src = "http://www.symbols.com/gi.php?type=1&id=3005" style="width: 50px; height: 50px" align="left">

来源

2017-01-31 17:33:01 randomz

不建议使用基于样式的属性，比如'align'，因为它们在HTML5中已经过时。 –

回答

相关问题