顯示在同一行上的圖像和h1標籤CSS

在同一行上顯示兩個圖像和一個h1標籤時出現問題。我想將一個圖像對齊左側和右側的最後兩個元素。有關如何做到這一點的任何提示？顯示在同一行上的圖像和h1標籤CSS

HTML

<div class="header"> 
<img src="meny_knapp2.png" class="meny" alt="meny link"> 
<img class="hioa" src="logo_hvit.png" alt="HiOA logo"> 
<h1 class="lsb"> Læringssenteret </h1>    
</div>

CSS

.header { 
height:120px; 
width:100%; 
background-color:#ff7f1f; 
color:white; 
font-size:20px; 
display: table; 
vertical-align:middle; 
} 

.meny { 
height: 25px; 
margin-left:0.5em; 
line-height:120px; 
} 

.lsb { 
font-size:24px; 
letter-spacing:0.09em; 
font-weight:lighter; 
display:inline; 
} 

.hioa { 
height: 60px; 
float:right; 
margin-right:1em; 
}

來源

2013-04-17 user2289975

[此線索] [1]有類似的東西。看看那裏:) [1]：http://stackoverflow.com/questions/9201756/how-to-put-img-inline-with-text – NielsC

請附上形象更好，清晰容易理解 – mukund

我無法發佈圖片，因爲我沒有10個聲望 – user2289975

.header * { 
    float: right;

}

.header img:first-child { 
    float: left;

}

.hioa { 
    height: 60px; 
    margin-right:1em;

}

來源

2013-04-17 10:25:27

請調整CSS類

<div class="header"> 
    <div style="float:left;width:30%"> 
     <img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/> 
    </div> 
    <div style="float:right;width:70%"> 
     <img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/> 
     <h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>    
    </div> 
    </div>

來源

2013-04-17 10:34:58 mukund

顯示在同一行上的圖像和h1標籤CSS

回答

相關問題