Richten Sie ein Bild und Text in der gleichen Zeile

Ich möchte ein Bild und h1 in der gleichen Zeile ausrichten. Ich habe meinen Quellcode angehängt und es funktioniert nicht. kann jemand sagen, was damit nicht stimmt.Richten Sie ein Bild und Text in der gleichen Zeile

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

Quelle

2016-07-06 asiri attanayake

Sie könnten einfach die Positionierung (und float) entfernen und sie beide als Inline-Blockelemente anzeigen – VilleKoo

Verwendung 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>

können Sie auch float:left zu Bild verwenden und float:right an den Header

.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>

Quelle

2016-07-06 08:24:34

danke, es hat funktioniert. (y) –

kein Problem :) froh zu helfen, vielleicht können Sie die Antwort jetzt akzeptieren? : P –

Bitte versuchen Sie diesen Code:

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

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

Quelle

2016-07-06 08:27:21 vignesh

Ich konnte nicht bekommen, was Sie sagen wollen? – vignesh

In einer Situation wie dieser, wo das Bild im Wesentlichen Teil der Überschrift ist, würde ich das Bild haben, die aber überhaupt neben dem <h1>, nicht als <img> sitzt als background Stil angewendet Regel auf die <h1>:

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>

Quelle

2016-07-06 08:43:15 Rounin

ich danke Ihnen wirklich für Ihre Hilfe. –

Gern geschehen, @asiri. Wenn Sie möchten, akzeptieren Sie bitte die obige Antwort. Alternativ, wenn Sie weitere Fragen haben, bitte fragen Sie und ich werde tun, was ich kann, um zu helfen. – Rounin

Richten Sie ein Bild und Text in der gleichen Zeile

Antwort

Verwandte Themen