I am trying to implement a text and a button right next to each other in the center of a relatively small height div.

I current made a div with width 100% and a height of 70px and appended a text that is centered in the middle of the div. I want to make a button that will be right next to the text.

Here is the code:

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

Wanted result:

[[---------{"SOME TEXT" button}---------]]

That {"SOME TEXT" button} should be in the middle of that div.

Any helps would be much appreciated.

I am trying to implement a text and a button right next to each other in the center of a relatively small height div.

I current made a div with width 100% and a height of 70px and appended a text that is centered in the middle of the div. I want to make a button that will be right next to the text.

Here is the code:

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

Wanted result:

[[---------{"SOME TEXT" button}---------]]

That {"SOME TEXT" button} should be in the middle of that div.

Any helps would be much appreciated.

• javascript
• jquery
• html
• css

• Seems that you forgot to insert the newly created node: document.body.append(temp) :) – Maxime Launois Commented Apr 17, 2019 at 18:30
• 2 can you share the plete html? – brk Commented Apr 17, 2019 at 18:30

6 Answers 6

You can apply this CSS this will fix your problem.

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

Html you can write, this is just example what are you looking for.

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

Just create a div with property of display:flex; and add the 2 elements ( the text and button) inside this div

Here's a working example:

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

Edit: After testing your code it appears that it's working already but you forgot to add the button $("#bar").append("<button>Some Button</button>");

Here's your working example

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Besides what Maxime Launois already told you, you have to add the button you want also. Here's a plete example:

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Before using the node with jQuery you'll have to append it to the document body:

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This can be done if you use text-align on your bar then set the inner elements to display inline block. See an example fiddle here:

#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/54wrj0t9/

Wrap the button and the text in an div container. To vertical align this div to the middle a) use flexbox if you have an relative height. https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ b) Give the Div wrapper an absolute height and align it with margin.

For align the button right next to the text use display:inline-block;

Hope this is helpfull!