dialog body center pains

Question

I have a dialog box im going to turn into a manual entry dialog for a select box. I am having issues getting the text/input box to align vertically in the center. here is the URL if you want to view. Just select anything in the select box and you will see, I have made it taller for testing only. Below is my dialog code. http://moconsultant.net and below that is my css the CSS is also used for a dialog alert system I built 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;


 }

http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — AmanS, Jun 01 '14 at 14:10
uploaded code to my site sorry I should have done that first — user3657756, Jun 01 '14 at 14:29

score 0 · Answer 1 · answered Jun 01 '14 at 17:41

Here you have a demo on jsfiddle.net.

Set a CSS pseudo element to your wrapping div container, the div with the id="ui-id-7", for example. The CSS pseudo element gets a display: inline-block;, a height: 100%; and a vertical-align: middle;. Don´t forget the content: '';. Now wrap your content to be aligned in another div container and set this one to display: inline-block; and vertical-align: middle;.

By the way, I would recommend to use a label element for the input label. So users are able to click on the label to set the focus to the input field. Works for all kind of input types.

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

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

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

thank you i'll give it a try when I get a minute, I like the label idea, I have never used THAT thanks MO — user3657756, Jun 01 '14 at 18:42
to be honest I can't remember I was at that for hours and had made so many changes. it is not the code I am using though but most likely because it's all combined with other css I had out there — user3657756, Aug 01 '14 at 00:52

dialog body center pains

1 Answers1