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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以使用float:left对图片进行成像，并float:right使用标题

＆＃13;

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

＆＃13;

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

＆＃13;

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>除了应用于background的{{1}}样式规则之外的所有规则：

＆＃13;

<h1>

＆＃13;

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);
}

＆＃13;

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

3 个答案: