Javascript：如何使用動態設置的 CSS 樣式將在 Javascript 中創建的多個按鈕居中

Question

我正在嘗試使用動態設置的 CSS 樣式在 Javascript 中創建一行三個按鈕，但我在嘗試將按鈕行居中放置在頁面中間時遇到困難。 這是當前不屬於 div 的一部分的按鈕。

我試過button.align = 'center'; 沒有成功。

這是jsfiddle片段的鏈接。

HTML 骨架

  <head>
    <meta charset="utf-8">
    <title>Buttons</title>
  </head>

  <body>

    <script>
    </script>

  </body>

</html>

爪哇腳本

var one, two, three;

function button(text) {
  var button = document.createElement('button');
  var buttonText = document.createTextNode(text);
  button.appendChild(buttonText);
  return button;

}

function buttonTest() {
  one = button('one');
  two = button('two');
  three = button('three');

  // put the buttons on page
  document.body.appendChild(one);
  document.body.appendChild(two);
  document.body.appendChild(three);

}

buttonTest();

Answer 1

鏈接在這里

var one, two, three;

function button(text) {
  var button = document.createElement('button');
  var buttonText = document.createTextNode(text);
  button.appendChild(buttonText);
  return button;

}

function buttonTest() {
  one = button('one');
  two = button('two');
  three = button('three');

  var divElem = document.createElement('div');
  divElem.setAttribute('style', 'text-align:center;');
  // put the buttons on page
  //document.body.appendChild(one);
  //document.body.appendChild(two);
  //document.body.appendChild(three);
  divElem.appendChild(one);
  divElem.appendChild(two);
  divElem.appendChild(three);
    document.body.appendChild(divElem);
}

buttonTest();

Answer 2

一個快速的解決方案是將text-align : center添加到body

 var one, two, three; function button(text) { var button = document.createElement('button'); var buttonText = document.createTextNode(text); button.appendChild(buttonText); return button; } function buttonTest() { one = button('one'); two = button('two'); three = button('three'); // put the buttons on page document.body.appendChild(one); document.body.appendChild(two); document.body.appendChild(three); } buttonTest();

 body {text-align: center;}

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Buttons</title> </head> <body> <script> </script> </body> </html>

Javascript：如何使用動態設置的 CSS 樣式將在 Javascript 中創建的多個按鈕居中

問題描述

2 個解決方案

解決方案1
1 2018-02-06 18:18:30

解決方案2
0 2018-02-06 18:23:31

Javascript：如何使用動態設置的 CSS 樣式將在 Javascript 中創建的多個按鈕居中

問題描述

2 個解決方案

解決方案1 1 2018-02-06 18:18:30

解決方案2 0 2018-02-06 18:23:31

解決方案1
1 2018-02-06 18:18:30

解決方案2
0 2018-02-06 18:23:31