Html 带有文本和按钮的响应标题

我正在用文字和按钮制作一个简单的标题，但当我使用手机时，一切都没有反应。我试着使用%，但什么都没用。当我在手机上滚动时，我的CSS会上下跳跃。这是密码笔。下面是CSS。HTML你可以查看代码笔，因为帖子上说它主要是代码。 CSS:

HTML:

我们相信每个人都应该能够轻松地获得良好的牙齿护理
作为领先的行业创新者，*牙科业务*正在为牙科专业人士、投资者、员工和供应商打开令人兴奋的新机会。联系我们，了解我们能为您提供什么

---

您当前正在将

边距顶部

属性设置为按钮本身高度的20%

如果希望边距响应视口的宽度，请使用以下方法：

margin-top: 2vw; // 2% of the viewport width

但是，对于

margin top

属性，我建议使用视口的高度，如下所示：

margin-top: 1vh; // 1% of the viewport height (1% should be enough)

---

要使文本元素在div中居中，可以使用

flexbox

。在媒体查询之前，只需将以下代码添加到CSS文件的顶部：

.header-text1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  width: 100%;

}

此外，无需将其包含在媒体查询中，因为无论视口大小如何，

flexbox

都将处理所有内容

---

这有更新的代码-还更改了第二个媒体查询，这样CSS就不会像以前那样在767px和900px之间中断。

你能不能也添加你的html文件，这样我就可以尝试复制你的代码？刚刚添加了它^^^好的，我已经仔细查看了一下，但我不知道你到底想要什么效果。您说css“上下跳跃”，那么您是否希望文本保持在相同的高度，而不考虑视口大小？或者别的什么…这个看起来怎么样？没问题！我会把它作为答案贴出来，并加上解释。顺致敬意，

margin-top: 1vh; // 1% of the viewport height (1% should be enough)

.header-text1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  width: 100%;