Sayed Rafeeq Sayed Rafeeq - 4 months ago 34
CSS Question

row content needs to vertical middle alignment

I'm creating a row with 2 columns fist column contain background image second column contain content. I want to align this content vertices middle. I don't want to do it in css flexbox concept.

Code demo:



body{
background:#1e202b;
font-size:13px;
font-family: 'Raleway', Arial, Helvetica;
}
@import url(http://fonts.googleapis.com/css?family=Raleway);
.partial_section_wrap {
position: relative;
background-color: #f5f5f5;
padding: 50px 0px;
margin: 0 auto;
width: 100%;
height: 500px;
overflow: hidden;
}

.partial_section_image {
position: absolute;
width: 100%;
height: 130%;
top: -10%;
background-size: cover !important;
background-position: 50% 50% !important;
}

.partial_img_overlay {
position: absolute;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
}

.partial-inner{
position: relative;
max-width: 1170px;
margin: 0 auto;
}

.partial-content-wrap {
position: relative;
margin: 0;
}

.partial-content-inner {
padding: 30px 60px;
}

.partial-title {
position: relative;
margin-bottom: 20px;
}

.partial-title h3 {
font-size: 26px;
font-weight: bold;
margin: 0;
}

.partial-content {
font-size: 14px;
line-height: 20px;
}

.verticle-middle {
position: relative;
top: 25%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}

.btn-wrap.btn { margin: 20px 0 0 0; text-decoration: none; }

/* ================================================================= */
/* Services Shortcode */
/* ================================================================= */

.btn {
background-color: #00c1cf;
display : inline-block;
text-align: center;
margin-bottom: 10px;
position: relative;
cursor: pointer;
opacity: 1;
line-height: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}

.btn span {
left: 0;
position: relative;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}

.btn.full { text-align: center; width: 100%; }
.btn.border { border-width: 1px; border-style: solid;}
.btn.rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari, Google Chrome margin fix */
btn.btn span {
margin-top: -1px;
margin-left:-2px;
margin-right:-2px;
}
}

.btn.small { font-size: 12px; padding: 5px 8px; }
.btn.medium { font-size: 14px; padding: 10px 15px; }
.btn.large { font-size: 18px; padding: 15px 22px; }
.btn.xlarge { font-size: 24px; padding: 18px 26px; }

.btn.border {
background-color: rgba (0, 0, 0, 0) !important;
border: 2px solid rgba(255, 255, 255, 0.75);
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition: all 0.2s linear 0s !important;
-moz-transition: all 0.2s linear 0s !important;
-ms-transition: all 0.2s linear 0s !important;
-o-transition: all 0.2s linear 0s !important;
transition: all 0.2s linear 0s !important;
}

.btn.border:hover { border: 2px solid #FFFFFF; }

.light .btn.border { border: 2px solid rgba(255, 255, 255, 0.75); color: #FFFFFF; }
.light .btn.border { border: 2px solid #FFFFFF; }

.btn.dark.border { border: 2px solid rgba(0, 0, 0, 0.75); color: #000000; }
.btn.dark.border:hover { border: 2px solid #000000; }

.btn:hover { opacity: 0.75;}

.btn.dark { border:2px solid; background:none !important; -webkit-border-radius:none; -moz-border-radius:none; border-radius:none;}
.btn.light { border:2px solid #ffffff; background:none !important; -webkit-border-radius:none; -moz-border-radius:none; border-radius:none; }
.btn.dark span { color:#111111; }
.btn.light span { color:#ffffff; }

a.btn, a.btn:hover, btn.btn:hover { background-color:#EDEDED; }

.btn span span {
display: block;
font-size: 9px;
font-weight: normal;
letter-spacing: 0.5px;
}

a.btn.center{ display: table; margin: 0 auto;}
a.btn.left{ float:left; }
a.btn.right{ float: right; }

/* ================================================================= */
/* Layout Column */
/* ================================================================= */

.one_half { width: 48%; }
.one_third { width: 30.66%; }
.two_third { width: 65.34%; }
.one_fourth { width: 22%; }
.one_fifth { width: 16.8%; }
.three_fourth { width: 74%; }
.four_fifth { width: 79.2%; }
.two_fifth { width: 37.6%; }
.three_fifth { width: 58.4%; }
.one_sixth { width: 13.33%; }
.five_sixth { width: 82.7%; }

.one_half, .one_third, .two_third,
.one_fourth, .one_fifth, .four_fifth,
.one_sixth, .five_sixth, .two_fifth,
.three_fifth, .three_fourth {
position: relative;
display: inline; /* Old Browser Hack */
display: inline-block;
float: left;
margin-right: 4%;
margin-bottom: 15px;
}

.end,
.last { margin-right: 0 !important; }

/* No Margin Columns */

.nomargin.one_half { width: 50%; }
.nomargin.one_third { width: 33.33%; }
.nomargin.two_third { width: 66.66%; }
.nomargin.one_fourth { width: 25%; }
.nomargin.one_fifth { width: 20%; }
.nomargin.three_fourth { width: 75%; }
.nomargin.four_fifth { width: 80%; }
.nomargin.two_fifth { width: 40%; }
.nomargin.three_fifth { width: 60%; }
.nomargin.one_sixth { width: 16.66%; }
.nomargin.five_sixth { width: 83.33%; }

.nomargin.one_half, .nomargin.one_third, .nomargin.two_third,
.nomargin.one_fourth, .nomargin.one_fifth, .nomargin.four_fifth,
.nomargin.one_sixth, .nomargin.five_sixth, .nomargin.two_fifth,
.nomargin.three_fifth, .nomargin.three_fourth {
position: relative;
display: inline-block;
float: left;
margin-right: 0;
margin-bottom: 0;
}

.nomargin {margin: 0 !important;}

/* New Custom CSS */

.overflow-color{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0.5;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<!-- Partial Section Wrap -->
<section class="partial_section_wrap">
<!-- Partial Section Image -->
<div class="partial_section_image one_half nomargin" style="background: url(http://i.imgur.com/UJoq3Gg.jpg) 50% 0%;">
<div class="overflow-color" style="background-color: #673AB7;"></div>
</div>
<!-- Partial Section Content -->
<div class="partial-inner">
<div class="one_half nomargin"></div>
<div class="partial-content-wrap one_half nomargin">
<div class="partial-content-inner">
<div class="partial-title">
<h3>REPAIR SERVICES</h3>
</div>
<div class="partial-content">
<p>Ut fringilla sit amet odio ut imperdiet. Duis eu hendrerit dui, nec ultricies enim.
In consequat facilisis nisi et semper. Etiam sit amet volutpat turpis aan odio massa.

Ut fringilla sit amet odio ut imperdiet. Duis eu hendrerit dui, nec ultricies enim.
In consequat facilisis nisi et semper. Etiam sit amet volutpat turpis aan odio massa.</p>
<a href="#" class=" btn medium dark border btn-wrap"><span>Read more</span></a>
</div>
</div>
</div>
</div>
</section>




Answer

You can do it with the css properties display:table-cell and vertical-align:middle but your container must have an height and the elements in the container must been inline or inline-block

.partial-inner{height:300px; display:table-cell; vertical-align:middle; line-height:300px}

edit : and adding a line-height equal to height to avoid having padding on your sub-elements

edit 2 : with the following css it works for me (the above worked with fixed height, this works with dynamic height):

section.partial_section_wrap{
    padding: 0;
}   
.partial-inner{
    display: inline-block;
    width: 49%;
    vertical-align: middle
}
.partial_section_image.one_half.nomargin{
    float: none;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    height: 100%
}
.partial-content-wrap.one_half.nomargin{
    width: 100%;
}

Basically the 2 sub-elements are display:inline-block and vertical-align:middle. Both sub-elements must have an height that doesn't exceed the height of their container. In your css .partial_section_image.one_half.nomargin had an height of 130% so that's why I set it to 100% instead.