时间戳

首页 > 解决方案 > 如何将 div 中的文本和按钮元素彼此相邻对齐？

javascript - 如何将 div 中的文本和按钮元素彼此相邻对齐？

问题描述

我正在尝试在一个相对较小的高度 div 的中心实现一个文本和一个按钮。

我目前制作了一个宽度为 100%、高度为 70px 的 div，并附加了一个位于 div 中间的文本。我想在文本旁边制作一个按钮。

这是代码：

var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);
$("#bar").css("background-color", "white");

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold"
});

$("#bar").append("SOME TEXT");

想要的结果：

[[---------{“某些文本”按钮}---------]]

那个 {"SOME TEXT" button } 应该在那个 div 的中间。

任何帮助将不胜感激。

标签： javascriptjqueryhtmlcss

解决方案

您可以应用此 CSS，这将解决您的问题。

div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
}

您可以编写 Html，这只是您要查找的示例。

<div>
  <p>This is a paragraph.</p>
  <button>Click me button</button>
</div>

推荐阅读