Ausgerichtete Divs und H2

Ich versuche, das Datum vor einem h2 Titel anzuzeigen. Das Datum wird in zwei übereinander liegenden Feldern angezeigt. Die obere Box enthält den Tag des Monats, die untere Box den Monat und das Jahr.Ausgerichtete Divs und H2

die HTML (mit CSS-Test) ist wie folgt: -

<div style="text-align: center;display: inline"> 
     <div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px"> 
      12 
    </div>   
    <div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px"> 
      Dec-16 
    </div>   
    </div>

Dies zeigt sehr schön am Anfang der Zeile. Aber Dies ist H2 Text
wird nicht auf der gesunden Linie angezeigt, aber die nächste.

Da mein "date container" aus verschachtelten divs besteht, scheint dies nicht korrekt ausgerichtet zu sein.

Dies funktioniert auf der gleichen Linie ausgerichtet

<div style="display:inline">This is DIV text</div> 
    <h2 style="display:inline">This is H2 text</h2>

Dies nicht richtig ausrichten (wie ich will)

<div style="text-align: center;display: inline"> 
     <div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px"> 
      12 
    </div>   
    <div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px"> 
      Dec-16 
    </div>   
    </div> 
    <h2 style="display:inline">This is H2 text</h2>

TIA

Ephraim

Quelle

2016-06-15 Ephraim

Hoffnung unter Schnipsel Werke für dich.

<div style="text-align: center; float: left"> 
 
    <div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px"> 
 
    12 
 
    </div>   
 
    <div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px"> 
 
    Dec-16 
 
    </div>   
 
</div> 
 
<h2 style="float: left; margin-left: 10px;">This is H2 text</h2>

Quelle

2016-06-15 12:33:19

Verwenden inline-block statt inline.

<div style="text-align: center;display: inline-block"> 
 
     <div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px"> 
 
      12 
 
    </div>   
 
    <div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px"> 
 
      Dec-16 
 
    </div>   
 
    </div> 
 
    <h2 style="display:inline-block">This is H2 text</h2>

Quelle

2016-06-15 12:33:39

<body style="display:table"> 
 
    <div style="text-align: center;display: table-cell"> 
 
     <div style="border-radius:5px;font-size:20px;color:black;background-color:yellow;width:45px;height:30px"> 
 
     12 
 
     </div>   
 
     <div style="border-radius:3px;font-size:10px;color:#fff;background-color:black;width:45px;height:15px"> 
 
     Dec-16 
 
     </div>   
 
    </div> 
 
    <h2 style="display:table-cell; vertical-align:middle; padding-left: 10px;">This is H2 text</h2> 
 
</body>

hinzufügen display: table für Körper display: table-cell für div und h2 vertical-align: middle für h2 Es funktioniert völlig in Ordnung

Quelle

2016-06-15 13:16:33 Shivani

Ausgerichtete Divs und H2

Antwort

Verwandte Themen