小贝子编程

图片和h1标签显示在同一行CSS上



在同一行显示两个图像和一个h1标签时出现问题。我想把其中一张图片对齐到左边，最后两个元素对齐到右边。有什么建议吗?

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

.header * {
    float: right;

} 

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

} 

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

}

请调整class

中的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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium