gpt4 book ai didi

html - 对齐嵌套的 Div 和 H2

转载 作者:太空宇宙 更新时间:2023-11-03 21:20:38 24 4
gpt4 key购买 nike

我试图在 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

以法莲

最佳答案

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

添加显示: body 表显示:div 和 h2 的表格单元格垂直对齐:h2 居中它工作得很好

关于html - 对齐嵌套的 Div 和 H2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37835486/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com