Question

我有一个对话框，我将变成一个选择框的手动输入对话框。我在让文本/输入框在中心垂直对齐时遇到问题。如果要查看，这是URL。只需在选择框中选择任何内容，您就会看到，我已将其设置为仅用于测试。下面是我的对话框代码。 http://moconsultant.net以及那是我的CSS，CSS也用于我构建MO的对话警报系统

  $('.selectBox').change(function(){


        myDialogBox=" <div  title='Im a Manual Entry Box' class='dialogDiv'> Manual Entry:<input type='text' name='dialogName' id='dialogName' maxlength='40' class='dialogInput' ></div>"
        $(myDialogBox).dialog({
           autoOpen: true,
           width: 'auto',  
           height: '500',
           modal: true,
           fluid: true, //new option
            buttons:[               
                  {
            text: 'Retun',
             'class': 'return',
              click: function() {
               $(this).dialog( 'close' );

            myField.focus();myField.select();

             }
            }
            ], 
           close: function() {

           }
         });
         });
      }


/*mo alert*/

          .ui-dialog .ui-dialog-titlebar
          {
         background-color: #0D3257;
        color: #ffffff;
        text-align: center;    
          }

          .ui-dialog
          {
             border: 3px solid #0D3257;
          }
          .ui-dialog .ui-dialog-title
          { 
            margin: .1em 16px .1em 0;
           text-align: center;
            float:none !important; 
          }
        .ui-dialog .ui-dialog-content  { 
     border: none; 
     background-color: #B0C4DE;
     color: #00549E;
     padding: 0;
     vertical-align:text-middle;
  }
  .ui-button.continue{
     color:green;
     font-family: Arial;
     font-size: 12px;
     font-weight: bold;  
     background-color:#F1F3F7;
     height:28px;
     Width:150px;
     padding-bottom: 5px;
     border-style:outset;
     border-color:#9BB7D9;
     filter:progid:DXImageTransform.Microsoft.Gradient  
     (GradientType=0,StartColorStr='#F1F3F7',EndColorStr='#E2EEFD');
      }
   .ui-button.continue:hover {
    color:blue;
     }
     .ui-dialog .ui-dialog-buttonpane { 
    text-align: center;
}
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none;
     }
    .ui-button.return{
     color:green;
     font-family: Arial;
     font-size: 12px;
     font-weight: bold;
     background:#B0C4DE;
     text-align:center;
     height:28px;
     width:150px;
     outline: none;
     border:0px;
     filter:progid:DXImageTransform.Microsoft.Gradient  
     (GradientType=0,StartColorStr='#F1F3F7',EndColorStr='#E2EEFD');
      }
    .ui-button.return:hover {
    color:blue;
     }
.ui-widget-header {
    background:#0D3257;
    border:0px;
}
.dialogDiv{

 text-align:center;
 padding-top: 22px; /* you can use a padding to vertically center*/
}


 .dialogInput{
 height: 15px;


 }

Answer 1

您在jsfiddle.net上有 demo 。

将CSS伪元素设置为包装div容器，例如，使用id="ui-id-7"的div。 CSS伪元素获得display: inline-block;，height: 100%;和vertical-align: middle;。别忘了content: '';。现在将您的内容包装在另一个div容器中，并将其设置为display: inline-block;和vertical-align: middle;。

顺便说一句，我建议使用label元素作为输入标签。因此，用户可以单击标签将焦点设置为输入字段。适用于所有类型的输入。

HTML code：

<div class="dialogDiv ui-dialog-content ui-widget-content vertical-align-outer" id="ui-id-7" style="display: block; width: auto; min-height: 0px; max-height: none; height: 386px;">
    <div class="vertical-align-inner">
        <label for="dialogName">Manual Entry:</label>
        <input type="text" name="dialogName" id="dialogName" maxlength="40" class="dialogInput"/>
    </div>
</div>

CSS代码：

.vertical-align-outer:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.vertical-align-inner {
    display: inline-block;
    vertical-align: middle;
}

对话体中心的痛苦

1 个答案: