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.
Share Improve this question edited Apr 17, 2019 at 18:33 Get Off My Lawn 36.4k46 gold badges197 silver badges374 bronze badges asked Apr 17, 2019 at 18:28 cohstacohsta 1871 gold badge4 silver badges14 bronze badges 2-
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
Reset to default 5You 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!