文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将该页面的所有html元素定位到屏幕的中心？

问如何将该页面的所有html元素定位到屏幕的中心？
EN

Stack Overflow用户
提问于 2018-07-16 22:55:20
回答 2查看 101关注 0票数 0

如何使下拉列表和3个文本区居中显示在屏幕中央。

目前它位于screen.how的左侧，do I position it to the center。

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

这是我的jsp：

代码语言：javascript
复制
<%@ 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>

另外，如何将选择按钮与名为files(Java)的文本区域的右侧对齐？

html
css
jsp
EN

回答 2

Stack Overflow用户

发布于 2018-07-16 23:04:51

有许多方法可以做到这一点。首先，你可以将这个添加到你的风格中：

text-align:center;vertical-align:center;

或者，您可以设置elemnts position:relative，然后使用top、left、right和bottom调整位置

代码语言：javascript
复制
<html>
<style>
.change{
position:relative;
left:20%;
right:20%
top:40%
}
</style>


 <p class="change">Yo change!</p>

</html>

请注意，这些值对于所有设备都不会相同，因此您只需根据需要调整它们

票数 1
EN

Stack Overflow用户

发布于 2018-07-17 04:42:30

代码语言：javascript
复制
display: flex;
align-items: center;
justify-content: center;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51364673

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档