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 回答