How can I vertically center the text in my divs without affecting the JQuery I have to equal all divs to the same height? I've been trying to add top 50 and left 50 but it's messing up the sizing on my divs.
In desperate need of vertical text!
jQuery(document).ready(function($) {
$(document).ready(function() {
maxheight = 0;
$('.main article').each(function() {
maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
})
$('.main article').height(maxheight);
});
});/*Landing Page*/
#landingpage {
margin-top: 2.5em;
}
.landingpagetable {
margin-top: 2.5em;
max-width: 56em;
margin: 0 auto 0;
}
.landingpage .main article {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
text-align: center;
color: #fff;
font-size: 2em;
background-color: #d80000;
min-height: 6.2em;
}
article.lp1 {
/**/
background-image: url(../../../wp-admin/images/cpr_lp_03.jpg);
background-size: cover;
}
article.lp2 {
background-image: url(../../../wp-admin/images/cpr_lp_04.jpg);
background-size: cover;
}
article.lp3 {
background-image: url(../../../wp-admin/images/cpr_lp_05.jpg);
background-size: cover;
}
article.lp4 {
background-image: url(../../../wp-admin/images/cpr_lp_07.jpg);
background-size: cover;
}
article.lp5 {
background-image: url(../../../wp-admin/images/cpr_lp_08.jpg);
background-size: cover;
}
article.lp6 {
background-image: url(../../../wp-admin/images/cpr_lp_09.jpg);
background-size: cover;
}
@media all and (max-width: 800px) {
.landingpage .main article {
width: 100%;
}
.main article {
background-image: none;
min-height: 1em!important;
max-height: 2em!important;
}
}
@media all and (min-width: 1100px) {
.landingpage .main article {
width: 29.33%;
}
.main article {
/*background-image:none;*/
min-height: 9em!important;
max-height: 9em!important;
}
}
div#landingpage {
max-width: 1100px;
margin: 0 auto 0;
}
section.main #trial4444 p,
section.main #trial4445 p,
section.main #trial4446 p,
section.main #trial4447 p,
section.main #trial4448 p,
section.main #trial4449 p {
display: none!important;
}
section.main #trial4444,
section.main #trial4445,
section.main #trial4446,
section.main #trial4447,
section.main #trial4448,
section.main #trial4449 {
padding: 0;
margin: 0;
height: 0;
}
a:hover article.lp1,
a:hover article.lp2,
a:hover article.lp3,
a:hover article.lp4,
a:hover article.lp5,
a:hover article.lp6 {
color: #fff;
background-image: none;
background-color: #d80000;
/*adds zoom effect*/
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out
}
.landingpage .main article.lpfull {
border: thin solid #d80000;
}
div#landingpage div.landingpage section.main h1 {
font-size: 36pt;
color: #d80000;
text-align: center;
}
div.entry article.lpfull h1 {
font-size: 36pt;
color: #d80000;
text-align: center;
}
article.lpfull p {
float: left;
padding-right: 2em;
}
article.lpfull {
max-width: 1100px;
margin: 0 auto 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="landingpage">
<div class="landingpage">
<section class="main">
<h1>Find A Class</h1>
<div id="trial4444">
<a href="#">
<article class="lp1">CPR & AED Classes</article>
</a>
</div>
<div id="trial4445">
<a href="#2">
<article class="lp2">CPR & First Aid Classes</article>
</a>
</div>
<div id="trial4446">
<a href="#3">
<article class="lp3">BLS Classes</article>
</a>
</div>
<div id="trial4447">
<a href="#4">
<article class="lp4">EMSA Pediatric Classes</article>
</a>
</div>
<div id="trial4448">
<a href="#5">
<article class="lp5">Instructor Training</article>
</a>
</div>
<div id="trial4449">
<a href="#6">
<article class="lp6">Water Safety</article>
</a>
</div>
</section>
</div>
</div>
<hr>
<br>
<article class="lpfull">
<h1>UPCOMING CLASSES</h1>
[ESPRESSO_EVENTS_TABLE_TEMPLATE category_slug=current-classes order_by=event_name table_striping=false table_paging=false ]
</article>
