Javascript 对话身体中心疼痛

我有一个对话框，我要变成一个选择框的手动输入对话框。我在使文本/输入框在中心垂直对齐时遇到问题。这是您想要查看的URL。只需在选择框中选择任何内容，您就会看到，我已将其提高，仅用于测试。下面是我的对话框代码。下面是我的css，css也用于我构建的对话框警报系统

  $('.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;


 }

这里是jsfiddle.net上的一个示例

将CSS伪元素设置为包装div容器，例如id=ui-id-7的div。CSS伪元素获取一个display:inline block；，a高度：100%；和垂直对齐：中间；。不要忘记内容：；。现在将要对齐的内容包装到另一个div容器中，并将此容器设置为display:inline block；和垂直对齐：中间

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

HTML代码：

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

---

这不起作用，但感谢你将代码上传到我的网站抱歉我应该先这么做谢谢你我会在我有时间的时候尝试一下，我喜欢标签的想法，我从来没有用过谢谢MOto说实话，我不记得我在那里呆了几个小时，做了很多改变。这不是我正在使用的代码，但很可能是因为它与我在那里使用的其他css结合在一起

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

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