Wie platziere ich Text über einem Element in HTML/CSS?

Question

Nun, ich möchte, dass dieser Text ganz oben steht, etwa 20 PX von der Oberseite des Wrappers (Hintergrundfarbe) Ich habe den Rand oben gemacht, aber nichts ist passiert, wenn jemand helfen kann, wird es sehr geschätzt werden.

CODE

.wrapper { 
 
\t background-color: #01172c; 
 
} 
 

 
.footerid { 
 
\t list-style: none; 
 
} 
 

 
.footerid li { 
 
\t padding-left: 125px; 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t display: inline; 
 
\t display: inline-block; 
 
} 
 

 
.footerid h3 { 
 
\t padding-top: 20px; 
 
\t margin-top: 20px; 
 
}

<footer> 
 
\t <div class="wrapper"> 
 
\t \t <ul class="footerid"> 
 
\t \t \t <li><a href="#"><img src="logo-f.png" style=" width:80px; height:105px;"></a></li> 
 
\t \t \t <li><h3>lol</h3></li> 
 
\t \t </ul> 
 
\t </div> 
 
</footer>

Führen Sie den Code Probe richtig zu sehen, in vollem Umfang nutzen.

Answer 1

Sie haben das li Element über die vertical-align, um anzuzeigen, die ich top für diesen Fall

Bitte sehen https://jsfiddle.net/4zr9j3eg/

ich auch die padding Eigenschaft für Ihre h3 Element, das die margin wird SUMUP gesetzt hätte deaktiviert das macht den Text Abstand von oben nach 40px

Auch ich änderte die Textfarbe zu color: #fff; für de Bug einfacher

Answer 2

Als allgemeine Tipps, können Sie den Wrapper auf Position: relativ; Dadurch können Sie die Elemente (Kinder) innerhalb des übergeordneten Elements (in diesem Fall der Wrapper) mit der absoluten Position "steuern".

Beispiel:

#wrapper { 
    position:relative; 

} 

#wrapper .child { 
    position: absolute; 
    top: 20px; 
} 

Answer 3

Bewerben vertical-align: top zu <li>:

.footerid li { 
    padding-left: 125px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    display: inline; 
    display: inline-block; 
    vertical-align: top; 
} 

und entfernen Polsterung und Marge von .footerid h3.