显示在同一行上的图像和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

回答

相关问题