Question

我最近刚接触CSS和HTML，在标题中对齐我的徽标和标题时出现问题：

enter image description here

我尝试了几种解决方案，但我没有成功。如果你能给我一个提示，我将不胜感激。谢谢。

HTML CODE：

<!  DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title goes here</title>
  <meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>  <img src="images/img1.jpg" width="250" height="190" float="right" />  Some text here </h1>
</div>
</body>
</html>

我的CSS代码：

body {
    font-family: sans-serif,Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
.page {
    width: 1000px;
    float: left;
    padding: 42px 0px 0px 0px;
    position: center;
}   
.header {
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;    
}
.header h1{
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}

由于

Answer 1

一种解决方案是使用vertical-align: middle img like：

body {
  font-family: sans-serif, Arial;
  font-size: 12px;
  color: #000000;
  margin: 0px;
  background-color: #d9d7d7;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
form,
input,
textarea {
  padding: 0px;
  margin: 0px;
  color: black;
}
.page {
  width: 1000px;
  float: left;
  padding: 42px 0px 0px 0px;
}
.header {
  position: absolute;
  top: 42px;
  margin-left: -500px;
  left: 50%;
  width: 1000px;
  background-color: white;
  border-style: solid solid none solid;
  border-width: thick;
}
.header h1 {
  display: inline;
  text-align: left;
  font-family: cursive;
  font-size: 45px;
  color: black;
}
h1 img {
  vertical-align: middle;
}

<div class="page">
  <div class="header">

    <h1>  <img src="images/img1.jpg" width="250" height="190"  />  Some text here </h1>

  </div>

float="right"也不是有效的html属性。看一下image MDN这里有效的图像html属性。

Answer 2

使用您的HTML代码：

<h1>  
    <img src="http://lorempixel.com/250/190/" width="250" height="190" />  
    <p>Some text here</p> <!-- Put your text into a <p> -->
</h1>

在你的CSS：

.header h1{
    display: block;  /* display: block; */
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}
/* And this */
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px; /* Here is the trick... line-height = image height */
}

Finddle：http://jsfiddle.net/4sfab9u0/

对齐标题和徽标

2 个答案: