Question

我有以下HTML代码。 http://jsfiddle.net/Lijo/wJX9C/

我需要将内容（“HAI”和按钮）对齐为中心对齐。我们如何纠正它？

注意：它需要在IE7，Chrome

中运行

<html>
<div id="popup"  class="popup">
       <div id = "poupContentLine1" class="poupContentLine">
            HAI
       </div>
       <div id = "poupContentLine2" class="poupContentLine">
            <input type="submit" name="ctl00$detailContentPlaceholder$btnClose" value="CLOSE" id="detailContentPlaceholder_btnClose" />
       </div>
</div>
</html>

风格

.popup 
{
  width:530px;
  background-color:#ffffff;
  border:3px solid Orange;
  padding: 10px 5px 10px 5px;
  margin: 0px 0px 0px 0px;
}

poupContentLine
{
    width:530px; 
    height:auto;
    text-align:center;
    margin: 0px 0px 0px 0px;
}

Answer 1

你错过了.

.poupContentLine

因为它是一个类名 - 例如小提琴：http://jsfiddle.net/wJX9C/2/

Answer 2

首先，删除popupcontentline样式;这是不必要的。然后将text-align: center添加到.popup。另外，将其缩短为margin: 0;（与您的问题无关，但所有那些“0”都不是必需的并且会延长您的代码。）

示例：http://jsfiddle.net/wJX9C/10/

.popup
{
    width:530px;
    background-color:#ffffff;
    border:3px solid Orange;
    padding: 10px 5px 10px 5px;
    margin: 0;
    text-align:center;
}

注意：HTML也可以简化，但我没有做任何事情。

文本对齐不起作用

2 个答案: