wie kann ich die position von text an der Seite von ein Bild in html5

Ich versuche, ändern Sie die HTML5-Boilerplate-header zu haben, ein zentrales Bild, ein Wort jeder Seite etwa so: wie kann ich die position von text an der Seite von ein Bild in html5

wie Sie sehen können habe ich es geschafft, dies war jedoch nur unter Verwendung von teilen aus Bausteinen und schlechte css, brach h5bp die Nützlichkeit. Würde ich gerne nutzen h5bp jetzt richtig und erreichen die gleiche Sache. Ich bin mir nur nicht sicher, wie es zu tun.

Mein Aktueller Versuch sieht wie folgt aus:
wie kann ich die position von text an der Seite von ein Bild in html5

Das Bild wird nicht in zwischen den Worten, sogar tho die Reihenfolge, in der mark-up ist wie folgt:

<div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</div>

Relevante CSS:

.center { display: table; margin: 0 auto; }

#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4; 
}

Wenn jemand erklären könnte, warum der text nicht neben dem Bild, würde sehr geschätzt werden.

Danke

Edit:

Während die Antwort unten gültig ist, habe ich eigentlich dieses problem gelöst, indem die < img > in den < h1 > anstatt Ihnen getrennt, etwa so:

<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>

InformationsquelleAutor user13070 | 2012-08-19

  1. 7

    Mit Ihren HTML-und CSS, die drei Elemente in einer Zeile zusammen:

    .center h1 {display: inline;}​

    Arbeiten demo: http://jsfiddle.net/jfriend00/yK7Qy/

    FYI, ich merke, dass Sie über die gleichen id="title" an mehreren stellen. Das wird nicht funktionieren für Sie, weil ein bestimmtes id kann nur vorhanden sein, auf die ein Objekt in die Seite. Wahrscheinlich möchten Sie Sie ändern, um class="title".

    Kann es einfacher sein, setzen Sie einfach den gesamten text und Bild in einem <h1> tag wie diesem:

    <div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1>
                <span class="title">First</span>
                <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
                <span class="title">Second</span>
            </h1>
        </div>
    </header>
</div>​

    Demo hier: http://jsfiddle.net/jfriend00/CHv4k/

    auch danke für den Tipp, wusste ich nicht! 🙂
    nun Frage ich mich, welche ist die bessere route zu nehmen: die Verwendung von class="Titel" mit separaten <h1> - tags um eine <img> oder mit <h1> - Tags mit <img> in der Mitte der beiden Wörter?
    Es ist wahrscheinlich einfacher, einfach die ganze Zeile in nur einem h1 tag. Bilder von Natur, die bereits inline, so dass Sie nur fließen mit dem text. HTML wurde entwickelt für die inline-Bilder. Sie können sehen, dass die version hier: jsfiddle.net/jfriend00/CHv4k

    InformationsquelleAutor jfriend00

  2. 2

    Versuchen Sie es mit display:inline-block; eher als display:inline. Ich habe nicht das Projekt vor mir, so dass ich nicht sicher bin ob das funktionieren wird.

    Aber, wenn es tut, wird das Bild in der falschen Stelle. Sie müssen einfach vertical-align oder margin-top:-##px.

    ah! ich war wirklich dumm. Ich war wahrhaftig der <img> in den <h1> ich machte zwei <h1>'s und legt es dazwischen ohne Grund. vielen Dank, dass mir dies erkennen

    InformationsquelleAutor Brandon Pereira

  3. 1

    Einen etwas anderen Ansatz, mit erstreckt, und nur eine h1-tag:

    <div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1 class="title">
                <span>First</span>
                <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
                <span>Second</span>
            </h1>
        </div>
    </header>
</div>​

    Und ich habe auch einige CSS:

    .center h1 {display: block; }
//Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}

    Fiddle hier

    InformationsquelleAutor stephenmurdoch

Schreibe einen Kommentar