在同一行中對齊圖像和文本

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