1

我有以下 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;
}
4

2 回答 2

10

你错过了一个.

.poupContentLine

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

于 2012-05-30T11:57:08.243 回答
1

首先，去掉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 也可以简化，但我没有做任何事情。

于 2012-05-30T12:01:41.837 回答