按钮在Internet Explorer中无法居中

Question

我在这里有一个jsFiddle，请使用Internet Explorer和其他主要浏览器打开:

http://jsfiddle.net/6bv7j/1/

现在在jsFiddle中，只需单击“添加问题”按钮，它将在下面附加一行。 在该行中显示两个按钮，一个称为“选择所有答案”，另一个称为“删除所有答案”。

现在，在主要浏览器中，按钮位于表格中间，这很好。但在Internet Explorer中，它没有居中，仍然靠左对齐。是否有一段代码导致它无法在Internet Explorer中居中，或者我需要添加一些内容才能使其居中在Internet Explorer中？

我尝试了float:center，但这并没有起作用。我不确定是否最好使用align方法。

以下是代码的CSS和jQuery / HTML：

.allBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

.allRemoveBtnsRow{
    text-align:center;
    cursor:pointer;
    font-size:85%;
}

Below is jQuery/HTML code:

$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");

- user1914374

---

尝试使用 body{text-align: center;} 可以使您的整个页面居中。 - jogesh_pi

IE中的调试控制台没有用处？ - John Dvorak

@JanDvorak 我从未使用过IE控制台，我该如何使用它进行调试？ - user1914374

@jogesh_p 我不想让整个元素居中，我只想让哪个单独的元素居中？ - user1914374

似乎在IE中，按钮的行为不像内联元素。 - John Dvorak

Answer 1

在

元素内不需要使用和标签。请移除$row和$cell，并将$BtnClass附加到$answer中：

// $row = $("<tr/>").appendTo($answer);
// $cell = $("<td/>").appendTo($row);

$BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");

$BtnsClass.appendTo($answer);

- Sree

---

嗨，我需要<tr>、<td>标签。 - user1914374

我应该将 div 标签更改为 <tr> 标签吗？ - user1914374

@user1930247，它的格式类似于<tr><td><div><tr><td></td></tr></div></td></tr>，这是无效的HTML格式。 - Sree

最佳的替换<div>标签的方法是什么？ - user1914374

在 td 元素内部放置 div 元素是有效的。但是为什么需要在 div 内部再放置 tr 和 td 元素呢？ - Sree

Answer 2

我不太确定你正在创建的结构是否“理想”，但是我已经对.answer CSS进行了一些更改，考虑到你现有的结构：

CSS

.answer
{
    width: 110px;
    margin: 0 auto;
    border: 1px solid red;
}

测试：http://jsfiddle.net/6bv7j/4/

- painotpi

---

嗨，我需要宽度为100％，当我尝试使用您的方法设置100％宽度时，它无法居中对齐。 - user1914374