उसी छवि पर लोगो छवि और एच 1 शीर्षक

Question

मैं अपना पहला वेब पेज बनाना चाहता हूं लेकिन एक समस्या का सामना करना पड़ा।

<img src="img/logo.png" alt="logo" /> 
<h1>My website name</h1> 

मुझे पता है कि कैसे लोगो और एच 1 एक ही पंक्ति में होना करने के लिए बनाना चाहते:

मैं निम्नलिखित कोड है। धन्यवाद!

Answer 1

उदाहरण के रूप में (DEMO):

HTML:

<div class="header"> 
    <img src="img/logo.png" alt="logo" /> 
    <h1>My website name</h1> 
</div> 

सीएसएस:

.header img { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background: #555; 
} 

.header h1 { 
    position: relative; 
    top: 18px; 
    left: 10px; 
} 

DEMO

Answer 2

अपने सीएसएस फ़ाइल में क्या img { float: left; } और h1 {float: left; }

Answer 3

इस प्रयास करें:

<img style="display: inline;" src="img/logo.png" alt="logo" /> 
<h1 style="display: inline;">My website name</h1> 

Answer 4

इस प्रयास करें:

1. एक कंटेनर DIV में दोनों तत्वों रखो।
2. फ्लोट ऑटो नाव का उपयोग कर बाईं ओर दोनों तत्वों:
3. कि कंटेनर दें संपत्ति अतिप्रवाह छोड़ दिया
4. एच 1 चौड़ाई दें ताकि इसे पूरी चौड़ाई का यह पैरेंट कंटेनर है नहीं लेता है।

Answer 5

अगर आपकी चित्र लोगो ऐसा करने क्यों नहीं का हिस्सा है:

<h1><img src="img/logo.png" alt="logo" /> My website name</h1> 

उपयोग सीएसएस बेहतर शैली।

और यह भी आपके लोगो को एक हाइपरलिंक बनाने का सबसे अच्छा अभ्यास है जो उपयोगकर्ता को होम पेज पर वापस ले जाता है।

तो तुम कर सकता है:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1> 

Answer 6

आप यह कर सकते के रूप में बिली मोट तुमसे कहा था, एक <div> में अपने <img> और <h1> लपेट और float: left; का उपयोग बाईं ओर अपनी छवि फ्लोट करने के लिए, <div>width और की तुलना में अपने h1 के लिए एक line-height सेट और <div style="clear: float;"></div> का उपयोग स्पष्ट करने के लिए सेट आपके फ़्लोटिंग तत्व।

Fiddle

Answer 7

बस सामग्री के भाग के रूप H1 टैग के अंदर img टैग चिपके रहते हैं।

Answer 8

इसे जांचें।

.header{width:100%; 
    } 

    .header img{ width: 20%; //or whatever width you like to have 

    } 

    .header h1{ 

    display:inline; //It will take rest of space which left by logo. 
} 

Answer 9

मैं बूटस्ट्रैप का उपयोग करेंगे और के रूप में एचटीएमएल सेट:

<div class="row"> 
    <div class="col-md-4"> 
     <img src="img/logo.png" alt="logo" /> 
    </div> 
    <div class="col-md-8"> 
     <h1>My website name</h1> 
    </div> 
</div>