Question

我正在尝试在一个相对较小的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 } ---------]]

{“ SOME TEXT” button }应该在该div的中间。

任何帮助将不胜感激。

Answer 1

您可以应用此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>

Answer 2

除了Maxime Launois已经告诉您的内容之外，您还必须添加所需的按钮。这是一个完整的示例：

var temp = document.createElement("div");
temp.setAttribute("id", "bar");

document.body.append(temp);

$("#bar").css("width", "100%");
$("#bar").css("height", 70);

$("#bar").css({
  "display": "flex",
  "justify-content": "center",
  "align-items" : "center",
  "font-size": "20px",
  "font-weight" : "bold",
  "background-color": "white"
});

$("#bar").append("SOME TEXT");
$("#bar").append("<button>Whatever</button>");

$("#bar button").css("margin", "10px");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

在将节点与jQuery一起使用之前，必须将其附加到文档主体：

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");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

只需创建一个属性为display:flex;的div，然后在该div中添加2个元素（文本和按钮）即可。

这是一个可行的示例：

#bar{
  width:100%;
  height:70px;
  background:#000;
}

.container{
  display:flex;
  justify-content:center;
  color:#fff;
}

<div id="bar">
<div class="container"><p>SOME TEXT</p><input type="button" value="Some Button"></div>
</div>

编辑：测试代码后，它似乎已经可以使用，但是您忘记添加按钮$("#bar").append("<button>Some Button</button>");

这是您的工作示例

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");
$("#bar").append("<button>Some Button</button>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

如果在栏上使用文本对齐然后设置内部元素以显示嵌入式块，则可以完成此操作。在这里查看示例小提琴：

#bar {
  width: 100%;
  height: 70px;
  text-align: center;
}
#bar p {
  display: inline-block;
}
.buttonExample {
  padding: 5px 10px;
  display: inline-block;
  color: white;
  background-color: red;
  border-radius: 4px;
}
<div id="bar">
  <p>
  Some Text
  </p>
  <div class="buttonExample">
    Button
  </div>
</div>

https://jsfiddle.net/54wrj0t9/

Answer 6

将按钮和文本包装在div容器中。要将这个div垂直对齐到中间a）如果您有相对高度，请使用flexbox。 https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ b）给Div包装器一个绝对高度，并使其与边距对齐。

要使文本旁边的按钮对齐，请使用display：inline-block;

希望这对您有所帮助！

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

6 个答案: