我最近刚接触 CSS 和 HTML，在对齐标题中的 Logo 和标题时遇到问题:
我尝试了几种解决方案，但都没有成功。如果你能给我一个提示，我将不胜感激。谢谢。
HTML 代码:
<! 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;
}
谢谢
最佳答案
一个解决方案是使用 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 属性。
关于html - 对齐页眉和 Logo ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26910166/