CODEWITHSUNDEEP
htmlcssjsp
Vignesh Swaminathan
Vignesh Swaminathan

Reputation: 57

How to position all html elements of this page to the center of the screen?

How to center the dropdownlist and the 3 textarea's to the center of the screen.
Currently it is sticking to the left of the screen.how do i position it to the center.

Note: The position of the submit button in the footer should remain unchanged.

This is my 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>

also how do i align the select button to the right of the textarea called files(Java).

Upvotes: 0

Views: 322

Answers (2)

sarthak_ishu11
sarthak_ishu11

Reputation: 1

display: flex;
align-items: center;
justify-content: center;

Upvotes: 0

user10059970
user10059970

Reputation:

There are a number of ways to do that. Firstly, you can add this to your style:

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

Or you could set the elemnts position:relative then adjust the position using the top,left,right and bottom as such

<html>
<style>
.change{
position:relative;
left:20%;
right:20%
top:40%
}
</style>


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

</html>

Note that the values won't be the same for all devices so you just have to adjust them according to your need

Upvotes: 1

Related Questions