vertical-align:middle; does not work
Please look at http://rkassoc.org/Houston/form.htm
Notice bordered item on left near bottom with text INITIAL TEST.
HTML / CSS for that is:
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;ver
Why does vertical-align:middle; not work?
Thanks
Notice bordered item on left near bottom with text INITIAL TEST.
HTML / CSS for that is:
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;ver
Why does vertical-align:middle; not work?
Thanks
Last Comment
ASKER
I added display:table-cell; Makes no difference.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<title>City of Houston Backflow Assembly & Test Report Form</title>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.wrapper{
max-width:1100px;
min-width:600px;
margin:0 auto;
}
</style>
<script type="text/javascript">
</script>
<script>
$(function() {
$( "#datepickerid" ).datepicker();
});
$(function() {
$( "#datepickert" ).datepicker();
});
</script>
</head>
<body>
<div class="wrapper">
<form method="POST" name="st" action="post_form.php" onSubmit="return chk_cals();">
<div class="container-fluid" >
<div class="row">
<div class="col-sm-3 col-xs-3" style="padding-top:3px;"><img src="images/logo.png" class="img-responsive"></div>
<div class="col-sm-9 col-xs-9 text-center" style="padding-top:50px; font-size:22px;"><b>City of Houston - Backflow Assembly & Test Report Form</b></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Name of Property: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="pn" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Property Address: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="padr" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">City, State, Zip: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="city" value="Houston">, <input type="text" size="2" name="state" value="TX"> <input type="text" style="width:50px;" name="zip"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Key Map#: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="keymap1" style="width:40px;">-<input type="text" name="keymap2" style="width:30px;"><span style="padding-left:20px;">Phone#: </span><input type="text" name="phac" style="width:40px;">-<input type="text" name="phex" style="width:40px;"> <input type="text" name="phl4" style="width:45px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Same as above: <input type="checkbox" name="ckmasa"> Mailing Address: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="madr" style="width:300px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;">Contact Name: </div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"><input type="text" name="conname" style="width:200px;"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6 text-right" style="padding-top:3px;"><b>Type of Assembly</b></div>
<div class="col-sm-6 col-xs-6 text-left" style="padding-top:3px;"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;">New <input type="radio" name="anr"></span><span style="padding-right:50px;">Existing <input type="radio" name="anr"></span>Replaced: <input type="text" name="rsn" style="width:150px;"> (Old serial number replaced)</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp"> Reduced Pressure Principle (RP)</span><span style="padding-right:50px;"><input type="radio" name="asstyp"> Reduced Pressure Principle Detector (RPD)</span><span><input type="radio" name="asstyp"> Pressure Vacuum Breaker (PVB)</span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:50px;"><input type="radio" name="asstyp"> Double Check Valve (DCV)</span><span style="padding-right:50px;"><input type="radio" name="asstyp"> Double Check Valve - Detector (DCD)</span><span><input type="radio" name="asstyp"> Spill Resistant Pressure Vacuum Breaker (SVB)</span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Manufacturer: <input type="text" name="mfg" style="width:150px;"></span><span style="padding-right:30px;">Model #: <input type="text" name="model" style="width:100px;"></span><span style="padding-right:30px;">Size: <input type="text" name="size" style="width:100px;"></span><span>Serial Number: <input type="text" name="serno" style="width:150px;"></span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Serving/Location: <input type="text" name="sloc" style="width:450px;"></span><span>Date Installed: <input type="text" name="instdate" id="datepickerid" ></span></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-12 col xs-12"> </div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">REDUCED PRESSURE PRINCIPLE ASSEMBLY</div>
<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">PRESSURE VACUUM BREAKER & SVB</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-4 col-xs-4 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:30px;">Double Check Valve Assembly</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">RELIEF VALVE</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">AIR INLET</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;height:30px;">CHECK VALVE</div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2" style="padding-top:3px;"> </div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #1</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;">CHECK VALVE #2</div>
<div class="col-sm-6 col-xs-6 text-center" style="padding-top:3px;vertical-align:middle;"> </div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">INITAL<br>TEST</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">D. C. Closed Tight <input type="checkbox" name="itcv1ct"><br>RP <input type="text" name="itcv1psi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itdcv1l"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Closed Tight <input type="checkbox" name="itcv2ct"><br><input type="text" name="itrvpsi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itdno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itrvpsi" style="width:75px;"> PSI<br>Did Not Open <input type="checkbox" name="itrvdno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Opened At<br><input type="text" name="itaipsi" style="width:75px;"> PSI<br>Did Not Open <input type="checkbox" name="itaidno"></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">Held At<br><input type="text" name="itcvpsi" style="width:75px;"> PSI<br>Leaked <input type="checkbox" name="itcvl"></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2 text-center" style="display:table-cell;padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;">REPAIRS<br>MATERIALS<br>USED</div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><textarea rows="3" cols="18" name="rmucv1"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><textarea rows="3" cols="18" name="rmucv2"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><textarea rows="3" cols="18" name="rmurv"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><textarea rows="3" cols="18" name="rmuai"></textarea></div>
<div class="col-sm-2 col-xs-2 text-center" style="padding-top:3px;vertical-align:middle;border-style: solid;border-width: 1px;height:90px;"><textarea rows="3" cols="18" name="rmucv"></textarea></div>
</div>
</div>
</form>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
"You didn't answer why you're creating a table with divs."
I am using Bootstrap to achieve a responsive "table" effect.
I am using Bootstrap to achieve a responsive "table" effect.
That sounds tedious. Good luck.
ASKER
What would you recommend?
I need a responsive site with a table like layout.
I know of NO OTHER WAY.
I need a responsive site with a table like layout.
I know of NO OTHER WAY.
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
Why are you creating a table with divs? That must be extremely frustrating.
One way around this is to make your div behave like a table cell by giving it a display of table-cell.
Open in new window
Please use the code tool to post your code to make it easier to read. It's so easy there's no excuse not to. Simply select your code and click the word CODE in the toolbar above your comment/question.