1

大约是 宽度的#LoginOuterBox hbox一半#FullScreenLoginWrapper，但停靠在屏幕的左侧。它拒绝服从pack="center"或拒绝align="center"父母。

<vbox id="browser-panel">
   <hbox id="FullScreenLoginWrapper" pack="center"  flex="1">
      <hbox id="LoginOuterBox" pack="start" >         
         <vbox flex="1">
            <label class="header" value="Welcome"/>
            <hbox class="FieldWrapper">
               <vbox pack="center">
                  <label value="Username" class="FieldLabel" control="LoginUsername"/>
               </vbox>
               <textbox id="LoginUserName" />
            </hbox>
            <hbox class="FieldWrapper">
               <vbox pack="center">
                  <label value="Password" class="FieldLabel" control="LoginPassword"/>
               </vbox>
               <textbox type="password" id="LoginPassword" />
            </hbox>
            <hbox  class="FieldWrapper" align="right">
               <button label="Login" class="ATKButton"/>
            </hbox>
         </vbox>
         <vbox align="center" width="300px;">
            <hbox pack="center">
               <image src='chrome://myaddon/skin/swim.svg' width='200px' />
            </hbox>
         </vbox>
      </hbox>
   </hbox>
</vbox>

对应款式：

#FullScreenLoginWrapper{
   position:fixed;
   top:0px;
   left:0px;
   right:0px;
   bottom:0px;
   z-index:2000;
   background:#272727;   
   color:#ccc;
}

#LoginOuterBox{
   border:1px solid #222;
   background:linear-gradient(#272727, #222222);
   padding:20px;
   margin:20px auto;
   border-radius:5px;

}

#FullScreenLoginWrapper label.header{
   margin-bottom:22px;
   font-size:22px;
   font-weight:normal;
   text-align:right;
}



#FullScreenLoginWrapper .FieldWrapper{
   margin-bottom:7px;
}

#FullScreenLoginWrapper textbox{
   width:200px;
}


#FullScreenLoginWrapper label.FieldLabel{
   width:95px;
   text-align:right;
   font-size:12px;
   margin-right:15px;
}

.ATKButton {
    background: linear-gradient(#333333, #222222) no-repeat scroll 1px 1px #494849;
    border: 1px solid #111111;
    border-radius: 2px 2px 2px 2px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    height: 28px;
    letter-spacing: 0.1em;    
    text-transform: uppercase;
    width: 120px;
    text-align:center;
}

我想要的是相当于：

div{
margin:0px auto;
width:50%;
}

框在父级（屏幕上）的中心位置。我如何实现这一目标？

4

1 回答 1

1

position: fixed在 XUL 中是令人讨厌的，并且行为不正确。

#LoginOuterBox您需要通过附加一个包装来解决此问题：

<hbox style="width: 100%; height: 100%;" pack="center" align="center">

此外，由于这似乎是为了覆盖browser.xul，请明智地选择您的 DOM id 和类名，这样它们就不会与浏览器或其他附加组件或将来发生冲突。通常你通过一个假命名空间来做到这一点，通过在所有内容前加上myveryuniqueaddonid-someid.

于 2013-09-05T03:33:04.737 回答