How can I adjust a button (created in js) horizontally middle?

Question

I tried "text-center" class, and other bootstrap classnames.

const evaluate = document.createElement('button');
evaluate.className="btn btn-outline-dark";
this.canvas.appendChild(evaluate);
evaluate.textContent = 'Calculate';
evaluate.id = 'eval'; 

Answer 1

You have to add style text-align
see this reference page. https://developer.mozilla.org/ko/docs/Web/CSS/text-align

const btn = document.createElement('button');
btn.id = 'eval'
btn.className='btn btn-outline-dark';
btn.textContent = 'Calculate';
btn.style = 'text-align:center';

this.canvas.appendChild(btn);

Answer 2

You need to add the class text-center to the parent. Try adding a div with this class name and append the button to it. Here is an example:

 const parent = document.createElement('div'); parent.className = 'text-center'; const evaluate = document.createElement('button'); evaluate.className="btn btn-outline-dark"; evaluate.textContent = 'Calculate'; evaluate.id = 'eval'; parent.appendChild(evaluate); document.body.appendChild(parent);

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">