Html 对齐标题和徽标_Html_Css

Html 对齐标题和徽标

html css

Html 对齐标题和徽标,html,css,Html,Css,我最近刚接触CSS和HTML，在对齐标题中的徽标和标题时遇到问题：我尝试过几种解决办法，但没有成功。如果你能给我一个提示，我将不胜感激。谢谢 HTML代码： <! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title goes here</title> <meta name="description" content="Desc

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

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

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>

谢谢

一个解决方案是使用

垂直对齐：中间

到img，如：

正文{
字体系列：无衬线，Arial；
字体大小：12px；
颜色：#000000；
边际：0px；
背景色：#d9d7d7；
}
h1，
h2，
h3，
h4，
h5，
h6，
P
ul，
ol,，
锂，
形式，
输入，
文本区{
填充：0px；
边际：0px；
颜色：黑色；
}
.第页{
宽度：1000px；
浮动：左；
填充：42px 0px 0px 0px；
}
.标题{
位置：绝对位置；
顶部：42px；
左边距：-500px；
左：50%；
宽度：1000px；
背景色：白色；
边框样式：实心-实心-非实心；
边界宽度：厚；
}
.标题h1{
显示：内联；
文本对齐：左对齐；
字体系列：草书；
字体大小：45px；
颜色：黑色；
}
h1 img{
垂直对齐：中间对齐；
}


这里有一些文字

一种解决方案是使用

垂直对齐：中间

到img，如：

正文{
字体系列：无衬线，Arial；
字体大小：12px；
颜色：#000000；
边际：0px；
背景色：#d9d7d7；
}
h1，
h2，
h3，
h4，
h5，
h6，
P
ul，
ol,，
锂，
形式，
输入，
文本区{
填充：0px；
边际：0px；
颜色：黑色；
}
.第页{
宽度：1000px；
浮动：左；
填充：42px 0px 0px 0px；
}
.标题{
位置：绝对位置；
顶部：42px；
左边距：-500px；
左：50%；
宽度：1000px；
背景色：白色；
边框样式：实心-实心-非实心；
边界宽度：厚；
}
.标题h1{
显示：内联；
文本对齐：左对齐；
字体系列：草书；
字体大小：45px；
颜色：黑色；
}
h1 img{
垂直对齐：中间对齐；
}


这里有一些文字

在您的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>

Finddle:

查看您的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>

芬德尔：

我不知道你到底问了什么。你能给我们提供一点更多的信息吗？为什么你要在h1 tagh1 img{vertical align:top；}中放置logo检查这个链接我不确定你到底问了什么。你能给我们提供更多的信息吗？为什么你要在h1 tagh1 img{vertical align:top；}中放置logo检查这个链接

.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 */
}