How can I get the text inside "grid2" and "section2" to vertically align in the middle?
Is this issue related to my HTML or is it a problem with the CSS? Can someone guide me in the right direction?
I have searched for similar questions but the answers haven't been helpful.
My HTML:
<html>
<head>
<title></title>
</head>
<body>
<div id="background">
<div id="template">
<div class="grid2">
<div class="section2">
<h2 style="text-align: center;">New 2014 Model</h2>
<p>Latest model forced air (with a fan) fully automatic 48 egg incubator.</p>
<p>This new design uses a sophisticated program for automated hatching process that produces one of the highest hatching rates of any model, yet is incredibly easy to use. Perfect for small hatchers, self sufficient households, or families incubating in the backyard.</p>
</div>
</div>
</div>
<!--responsive-->
My CSS:
body {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
#background {
background-color:#FFFFFF;
background-position:top;
width:100%;
max-width:1000px;
margin:auto;
}
#template {
padding:10px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:16px;
}
.responsive {
width:100%;
}
.grid2 {
float: left;
width:50%;
min-width:280px;
}
.grid3 {
float: left;
width:33.3%;
min-width:280px;
}
.grid4 {
float: left;
width:16.66%;
min-width:160px;
}
.section4 {
padding:1px;
}
.section3 {
padding:5px;
}
.section2 {
padding:10px;
}
.shrinkable {
clear: both;
padding: 0px;
margin: 0px;
text-align:center;
}
.shrinkable img {
width:60%;
height: auto;
}
.shrinkable p {
text-align:center;
}
.column {
display:block;
float:left;
margin: 1% 0 1% 1.6%;
}
.column:first-child {
margin-left: 0;
}
.box {
width: 32.2%;
}
.row:before,.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
Here is an example