在同一行中对齐图像和文本

Question

我想将图像和h1对齐在同一行中。 我已附上我的源代码，它不起作用。 有人可以告诉我这是怎么回事。

<head>
    .header img{
        float: left;
        width: 2px;
        height: 3px;
        background: #555;
    }
    .header h1{
        position: relative;
        top: 18px;
        left: 10px;
    }

    <title> home page </title>
</head>
<body>

    <div class="header">
        <img src="greenlock.jpg" alt="logo" />
        <h1> UNIVERCITY OF GREENLOCK <h1>        
    </div>

Answer 1

使用display : inline-block

 .header img{ display:inline-block; width:10px; height:3px; background:#555 } .header h1{ display:inline-block; position: relative; }

 <div class="header"> <img src="greenlock.jpg" alt="logo" /> <h1> UNIVERCITY OF GREENLOCK <h1> </div>

您还可以使用float:left来显示图片，并使用float:right来显示标题

 .header img{ float:left; width:10px; height:3px; background:#555 } .header h1{ flaot:right; position: relative; }

 <div class="header"> <img src="greenlock.jpg" alt="logo" /> <h1> UNIVERCITY OF GREENLOCK <h1> </div>

Answer 2

请尝试以下代码：

 .header img{
  width:2px;
  height:3px;
  background:#555;
  vertical-align: middle;

}
.header h1{
  display: inline-block;
  vertical-align: middle;
}

Answer 3

在这种情况下，图像本质上是标题的一部分 ，我将使图像位于<h1>旁边，根本不作为<img> ，而是作为应用于<h1>的background样式规则：

 h1 { margin: 18px 0 0 10px; padding-left: 30px; font-size: 16px; line-height: 24px; text-transform: uppercase; background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255); }

 <header> <h1>University of Greenlock</h1> </header>

在同一行中对齐图像和文本

问题描述

3 个解决方案

解决方案1
0 2016-07-06 08:24:34

解决方案2
0 2016-07-06 08:27:21

解决方案3
0 2016-07-06 08:43:15

在同一行中对齐图像和文本

问题描述

3 个解决方案

解决方案1 0 2016-07-06 08:24:34

解决方案2 0 2016-07-06 08:27:21

解决方案3 0 2016-07-06 08:43:15

解决方案1
0 2016-07-06 08:24:34

解决方案2
0 2016-07-06 08:27:21

解决方案3
0 2016-07-06 08:43:15