如何将该页面的所有html元素放置在屏幕中央？

时间：2018-07-16 14:55:20

标签： html css css3 jsp

如何将下拉列表和3个文本区域居中放置在屏幕中央。
目前它在屏幕左侧，请问如何将其放置在屏幕中央。

注意：提交按钮在页脚中的位置应保持不变。

这是我的jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

         <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />      
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />      
    <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />  

        <style>



        .fileter-wrap .form-group{margin-bottom:1px;}
        .fileter-wrap .table{background:none;}
        .fileter-wrap .table .control-label{ text-align:right; margin-bottom:1px; font-weight:600; display:block; line-height:11px;}
        .control-label .doc-att{}
        .control-label .doc-att input[type="checkbox"]{margin-top:0;}
        .fileter-wrap{padding:2px 15px;}
        .fileter-wrap .table > tbody> tr > td{padding:4px 4px; vertical-align:middle;}
        .fileter-wrap .table > tbody> tr > td.v-mid{vertical-align:middle;} 
        .table{border-collapse: inherit!important;}

        .dropbtn:hover, .dropbtn:focus {
            /* background-color: #2980B9; */
            cursor:pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown a:hover {background-color: #ddd}
        .dropdown-content a:hover {background-color: #ddd}

        .show {display:block;}

        .modalDialog {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.8);
            z-index: 99999;
            opacity:0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }


        .tabs-wrap > ul > li.active a{background: #fff !important;border-bottom-color: #fff !important;}
        </style>
</head>
<body>
<div class="tabs-wrap left relative grey-bg" id="pay-post">
 <div class="clearfix spacer10"></div>
 <ul class="nav mt12 pull-right">
        <li class="active"><a href="#" data-toggle="tab" data-target="#patbase" onclick="">Tab 1</a></li>

        <li><a href="#" data-toggle="tab" data-target="#sumbase" onclick="">Tab 2</a></li>

         </ul>         
         <div class="clearfix"></div>
<div  class="tab-content">
 <div   class="tab-pane active" id="patbase">
  <div class="nopadbot grey-bg mt3"> 
 <div class="fileter-wrap grey-bg" >   
<div class="clearfix spacer10"></div>
<div class="" style="width:70% !important;">
<div class="">
  <div class="" style="">
    <div class="col-sm-12 nopadding">
     <div class="doc-att fileter-wrap grey-bg txtnormal pad15">

<div id="outPopUp"  class="form-group">
          <label class="col-sm-2 control-label nopadding">Source Version</label>

          <div  class="col-sm-4 nopadright">
            <select id="clinicalLvl" name="clinicalLvl" class="form-control input-sm">
              <option value = "2">V11</option>
              <option value = "3">11i</option>
              <option value = "4">Tag Branch</option>
            </select>
          </div>

          <div class="clearfix"></div>
        </div>  

 <div class="clearfix spacer10"></div>

 <div class="form-group">
          <label class="col-sm-2 control-label nopadding">Files     (Java)</label>

          <div class="col-sm-10 nopadright">

           <textarea rows="10" cols="70">  

          </textarea>  

          </div>
           <button type="button"  class="btn btn-blue btn-sm btn-xs" onClick="">Select</button>
          <div class="clearfix"></div>
        </div> 

 <div class="clearfix spacer10"></div>
  <div class="form-group">
          <label class="col-sm-2 control-label nopadding">Files    (JSP/JS)</label>

          <div class="col-sm-10 nopadright">
          <textarea rows="10" cols="70">  

          </textarea>
          </div>
          <div class="clearfix"></div>
         </div>  
 <div class="clearfix spacer10"></div>
 <div class="form-group">
          <label class="col-sm-2 control-label nopadding">Comments</label>

          <div class="col-sm-10 nopadright">
            <textarea rows="10" cols="70">  

          </textarea>
          </div>
          <div class="clearfix"></div>
         </div>  
  <div class="clearfix spacer10"></div>
      </div> 

 <div style="width: 100%" class="modal-footer bd-mid-top grey-bg nomargin">


        <button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Submit</button>

      </div>

  <div class="clearfix"></div>

  </div>  
   </div>   

      </div>
        </div> 
         </div> 
          <div class="clearfix"></div>
         </div>
          </div>

 <div class="tab-pane " id="sumbase">
  <div class="nopadbot grey-bg mt3"> 
 <div class="fileter-wrap grey-bg" >   
<div class="clearfix spacer10"></div>
<div class="" style="width:70% !important;">
<div class="">
  <div class="" style="">
    <div class="col-sm-12 nopadding">
     <div class="doc-att fileter-wrap grey-bg txtnormal pad15">
<div class="form-group">
          <label class="col-sm-2 control-label nopadding">Source Version</label>

          <div class="col-sm-4 nopadright">
            <select id="clinicalLvl" name="clinicalLvl" class="form-control input-sm">
              <option value = "2">V11</option>
              <option value = "3">11i</option>
              <option value = "4">Tag Branch</option>
            </select>
          </div>

          <div class="clearfix"></div>
        </div>  

 <div class="clearfix spacer10"></div>

 <div class="form-group">
          <label class="col-sm-2 control-label nopadding">Change Log</label>

          <div class="col-sm-10 nopadright">

           <textarea rows="10" cols="70">  

          </textarea>  

          </div>

          <div class="clearfix"></div>
        </div> 

 <div class="clearfix spacer10"></div>

 <div class="clearfix spacer10"></div>
 <div class="form-group">
          <label class="col-sm-2 control-label nopadding">Comments</label>

          <div class="col-sm-10 nopadright">
            <textarea rows="10" cols="70">  

          </textarea>
          </div>
          <div class="clearfix"></div>
         </div>  
  <div class="clearfix spacer10"></div>
      </div> 

 <div class="modal-footer bd-mid-top grey-bg nomargin">


        <button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Submit</button>

      </div>

  <div class="clearfix"></div>

  </div>  
   </div>   

      </div>
        </div> 
         </div> 
          <div class="clearfix"></div>
         </div>
          </div>
        <div class="clearfix"></div>
        </div> 
         </div>
         <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/floatThead.js"></script>
    <script src="js/datatable.js"></script>
    <script src="js/jquery-ui-timepicker-addon.js"></script>
    <script src="js/jquery-ui-sliderAccess.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

还要如何将选择按钮对齐到称为文件（Java）的文本区域的右侧。

2 个答案:

答案 0 :(得分：1)

有很多方法可以做到这一点。 首先，您可以将其添加到样式中：

System.Data.SqlClient

或者您可以设置元素text-align:center;vertical-align:center;，然后使用position:relative，top，left和right来调整位置 这样

bottom

请注意，并非所有设备的值都相同，因此您只需要根据需要进行调整

答案 1 :(得分：0)

display: flex;
align-items: center;
justify-content: center;
相关问题
最新问题