Выравнивание вложенных разделов и H2

Я пытаюсь показать дату перед заголовком h2. Дата отображается как две коробки, одна над другой. Верхняя коробка содержит день месяца, нижний ящик месяца и года.Выравнивание вложенных разделов и H2

HTML-код (с тестовым CSS) выглядит следующим образом: -

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

ТИА

Ефрем

источник

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 вертикального выравнивания: середина для h2 Он работает отлично нормально

источник

2016-06-15 13:16:33 Shivani

Выравнивание вложенных разделов и H2

ответ

Смежные вопросы