如何解决同一div中h1元素与label元素的水平对齐问题？

嘿，这个问题我之前也碰到过！问题的根源很明显：你的关闭按钮被设置了position: absolute，这直接让它跳出了.tooltip-first这个flex容器的文档流，所以你设置的flex-direction: row和justify-content: space-between根本管不到它，自然就和“BUY THIS”错位了。

给你两个简单的修改步骤，就能完美解决：

1. 移除关闭按钮的绝对定位：把.tooltip .close里的position: absolute、top和right属性删掉，让它回到flex容器的正常布局流中。
2. 给flex容器添加垂直居中对齐：给.tooltip-first加上align-items: center，这样容器内的两个元素就能在垂直方向上居中对齐，和“BUY THIS”的基线保持一致。

如果之后你想让关闭按钮和容器右侧保留一点间距，还可以给.close加个margin-right: 5px之类的，按需调整就行。另外我注意到你的.tooltip-first可能没加display: flex？如果之前没加的话一定要补上，不然flex的属性都不会生效哦！

下面是修改后的完整代码：

修改后的CSS #

.close{ font-size:13px; } 
.price-line{ font-weight: 400; font-size: 10px; line-height: 20px; } 
.tooltip-first{ 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; /* 新增：垂直居中对齐 */
  display: flex; /* 补充：确保是flex容器 */
} 
.tooltip-title { font-weight: 700; font-size: 10px; line-height: 20px; } 
.tooltip-msg{ font-weight: 400; font-size: 10px; line-height: 20px; } 
.tooltip-footer { font-weight: 400; font-size: 5px; line-height: 12px; } 
/* 移除了关闭按钮的绝对定位属性 */
.tooltip { text-align: right; position: relative; display: block; } 
.tooltip .tooltip-content { /* display:none; */ width: 500px; background-color: black; color: #fff; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; } 
.tooltip .tooltip-content::after { content: " "; position: absolute; border-style: solid; border-width: 5px; } 
.tooltip .tooltip-content { width: 200px; bottom: 150%; left: 50%; margin-left: -60px; } 
.tooltip .tooltip-content::after { top: 100%; left: 90%; margin-left: -5px; border-color: black transparent transparent transparent; } 

HTML（无需修改） #

<div style="height: 300px"> </div> 
<div class="tooltip"> 
    <label for="clickable"> 
        <div class="price-line">price tag</div> 
    </label> 
    <div class="tooltip-content"> 
        <div class ="tooltip-first"> 
            <h1 class="tooltip-title">BUY THIS</h1> 
            <label for="closeCheck"> 
                <div class="close"> &#x2715; </div> 
            </label> 
        </div> 
        <p class="tooltip-msg"> ON A SALE</p> 
        <p class="tooltip-footer"> *BUY NOW</p> 
    </div> 
</div>

JavaScript（无需修改） #

var dialog= document.querySelector(".tooltip-content"); 
var openBtn = document.querySelector(".price-line"); 
var closeBtn = document.querySelector(".close"); 
openBtn.addEventListener("click",()=>{ 
    dialog.style.display ="block"; 
}); 
closeBtn.addEventListener("click",()=>{ 
    dialog.style.display ="none"; 
}) 

这样修改后，关闭按钮就会和“BUY THIS”完美对齐在同一水平线上啦！

内容的提问来源于stack exchange，提问作者lifewithoutjava0909