Question

我想在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>

TIA

莲

Answer 1

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

添加显示：身体表 display：用于div和h2的table-cell vertical-align：中间为h2 它工作得很好

Answer 2

希望下面的代码片段适合你。

＆＃13;

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

＆＃13;

Answer 3

使用inline-block代替inline。

＆＃13;

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

＆＃13;

对齐嵌套Div和H2

3 个答案: