Richten Sie ein Bild, Mitte, unten von einem responsive div

<div id="banner" class="cf">
        <div class="banner container">
            <hr/>
            <p class="banner-text">
            Some text here
            <span class="sub-bt">That's it.</span>
            </p>
            <a href="#" rel="nofollow" class="learn-btn">Learn More</a>

            <img src="<?php echo get_template_directory_uri(); ?>/library/images/responsive_ex.png" class="res-ex">
        </div>
    </div>

Dies ist der code für das Problem so weit. Ich muss positionieren Sie das Bild mit einer Klasse von "res-ex" auf den Boden der div-Klasse "banner".

Ich habe versucht, mehrere table-cell und position-codes, aber kann einfach nicht scheinen, um es zu arbeiten.

Das design ist auch responsive.

InformationsquelleAutor Spencer | 2015-02-05
  1. 11

    Können Sie die Positionierung verwenden, um das Bild am unteren Rand des div und dann mithilfe von CSS-Transformationen, um es.

    CSS:

    .wrap {
    height: 400px;
    position: relative;
    background: #f09d09;
}

.wrap img{
    display: block;
    max-width: 100%;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    
}

    HTML:

    <div class="wrap">
    <img src="http://lorempixel.com/400/200/" alt=""/>
</div>

    JSFiddle Demo

    • Wie würden Sie diese vertikal zentriert, wie gut?
    • Die Magie ist hier: left:50%; transform:translateX(-50%); konnte Sie erklären? besonders der Transformation.
    InformationsquelleAutor Paulie_D
  2. 1

    Hier der code:

    .res-ex {
    position:absolute;
    min-width:100px;
    min-height:100px;
    bottom:0;
    display:inline-block;
}
.banner.container {
    position:relative;
}

    Müssen Sie festlegen position:absolute und display:inline-block (oder display:block) für das Bild und die position:relative für den container.
    Dann setzen Sie bottom:0 für das Bild.

    • Ich denke, das würde gearbeitet haben, aber Paulie_D Methode war es, was ich umgesetzt. Danke aber.
    • Wie ist das alles zentriert?
    • Aus der Beschreibung der post, habe ich verstanden, dass Spencer wollte, um die position des div am unteren Rand der container. Wenn es muss zentriert sein, dann ist dies die Lösung: jsfiddle.net/2ax92smb
    InformationsquelleAutor Wissam El-Kik
Schreibe einen Kommentar