我正在尝试让测试 Logo 与我的标题保持一致，但它不起作用，而且我不知道如何描述这个问题，所以我将发布一个 picture . 示例代码如下。
.name {
background-color: #b56663;
font-family: Helvetica, Arial, sans-serif, "Times New Roman";
color: white;
height: 100px;
margin: -8px 0 -5px -20px;
padding: 20px 0 0 30px; /*Top right bottom left*/
width: 99.815%;
}
.name h1 {
margin: 20px 0 0 150px;
}
.logo {
height: 100px;
width: 100px;
margin: -53.8px;
padding: 0 0 0 75px;
border: 0;
display: inline;
}
body {
background-color: gray;
}<body>
<img class="logo" src="images/logo.png" alt="logo">
<div class="name">
<h1>Lee Shewan</h1>
</div>
</body>最佳答案
你可以像这样重构你的代码:
body {
background-color: gray;
}
.name {
background-color: #b56663;
font-family: Helvetica, Arial, sans-serif, "Times New Roman";
color: white;
height: 100px;
padding: 20px 30px;
}
.name h1 {
margin:10px 20px;
display:inline-block;
vertical-align:middle;
}
.name .logo {
height: 100px;
width: 100px;
padding: 0 0 0 75px;
display:inline-block;
vertical-align:middle;
}<div class="name">
<img class="logo" src="https://lorempixel.com/400/400/" alt="logo">
<h1>Lee Shewan</h1>
</div>关于html - 获取与文本内联的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47952085/