ネストされたDivsとH2の整列

h2タイトルの前に日付を表示しようとしています。日付は2つのボックスとして表示されます。トップボックスには、月の日、下のボックス、月と年が含まれます。次のようにネストされたDivsとH2の整列

（テストCSSでの）HTMLは次のようになります -

<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テキストです
は表示されず、次の行には表示されません。

私の「日付コンテナ」はネストされたdivで作成されているため、正しく配置されていないようです。

これは罰金（私が望むように）これは正しく整列しない同じ行に

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

を揃えた作品

<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

はエフライム

出典

2016-06-15 Ephraim

スニペット作品下の希望あなたのために。

<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>

出典

2016-06-15 12:33:19

利用inline-blockの代わり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>

出典

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>

表示追加：それは作品H2 のためのミドル：身体表示用のテーブル：DIVとH2 垂直整列のためのテーブルのセルを完全に細かい

出典

2016-06-15 13:16:33 Shivani

ネストされたDivsとH2の整列

答えて

関連する問題