將圖像和文字排列在同一行中

我想在同一行中排列圖像和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>

來源

2016-07-06 asiri attanayake

您可以刪除定位（和浮動）並將它們顯示爲行內塊元素 – VilleKoo

使用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>

來源

2016-07-06 08:24:34

，謝謝它的工作。（y） –

沒問題:)高興地幫助，也許你現在可以接受答案？：P –

請試試這個代碼：

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

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

來源

2016-07-06 08:27:21 vignesh

我不明白你想說什麼？ – vignesh

在這樣的情況下，在圖像基本上是標題的一部分，我早就該坐在<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>

來源

2016-07-06 08:43:15 Rounin

非常感謝您的幫助。 –

不客氣，@asiri。如果您願意，請接受上面的答案。另外，如果您還有其他問題，請提出問題，我會盡我所能提供幫助。 – Rounin

將圖像和文字排列在同一行中

回答

相關問題