How to align text vertically center to the div?

Hello Folks,

I have a div(fitdetails), on hover i need to show another div which contain text and button. Below is my markup I am unable to vertically center the text do I need to add any more properties and as well as while decrease the opacity of background color It also effecting to the text.

<!DOCTYPE HTML>
<html>
<head>
<style>
.fitdetails{
	position: relative;
    height: 610px;
    width: 412px;
    float: right;
    padding-right: 25px;
    padding-bottom: 60px;
}
.fitdetails .shopnow-desc{
	box-sizing: border-box;
	position: absolute;
    top: 0;
    height: 610px;
    width: 412px;
    text-align: center;
    background-color: #ccc;
	opacity: 0.5;
	}
.shopnow-desc h2 {
    font-family: "Interstate-Bold"!important;
    font-size: 24px;
    color: #000;
    margin: 40px 0 30px 0;
    text-transform: uppercase;
}
.shopnow-desc .morecolors {
    margin: 30px 0 0px 0;
    clear: both;
    text-align: center;
    padding-top: 32px;
}
.shopnow-desc .morecolors a {
    background: #333;
    padding: 18px 66px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}
</style>
</head>
<body>
<div class="fitdetails">
	<a href="#"><img src="img/border.png" width="412" height="610"/></a>
					<div class="shopnow-desc">
						<h2>Welcome Text</h2>
						<div class="morecolors">
							<a href="#" >SHOP NOW</a>
						</div>
					</div>

				</div>
</div>
</body>
</html>

Hi,

Can you clarify what element you are showing? Is it the shopnow-desc or is it another element not shown?

Also you have two anchors in the code but at the moment you have something on top hiding the one around the image. Are both anchors needed (two destinations) or does the whole block simply have one destination at all times.

If you avoid opacity and use rgba instead then you can make the background transparent without affecting the content.

Here’s how to center the items but I need to know the answers to the above for a full solution.

<!DOCTYPE HTML>
<html>
<head>
<style>
.fitdetails {
	position: relative;
	height: 610px;
	width: 412px;
	float: right;
	display:table;
}
.shopnow-desc {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	background:rgba(204,204,204,0.5);
}
.backdrop{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:0;
	z-index:-1;
}
.shopnow-desc h2 {
	font-family: "Interstate-Bold"!important;
	font-size: 24px;
	color: #000;
	margin:0 0 30px;
	text-transform: uppercase;
}
.morecolors {
	text-align: center;
}
.morecolors a {
	background: #333;
	padding: 18px 66px;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	display:inline-block;
}
</style>
</head>
<body>
<div class="fitdetails"> <span class="backdrop"><img src="http://lorempixel.com/400/200" width="412" height="610"></span>
  <div class="shopnow-desc">
    <h2>Welcome Text</h2>
    <div class="morecolors"> <a href="#test" >SHOP NOW</a> </div>
  </div>
</div>
</div>
</body>
</html>

I think you may be looking for something similar to this but there could be a number of variations that you want.

<!DOCTYPE HTML>
<html>
<head>
<style>
.fitdetails {
	height: 610px;
	width: 412px;
	float: right;
	display:table;
	background:url(http://lorempixel.com/400/200) no-repeat 50% 50%;
	background-size:cover;
	text-decoration:none;
}
.shopnow-desc {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	background:rgba(204,204,204,0.5);
	cursor:pointer;
}
.shopnow-desc h2 {
	font-family: "Interstate-Bold"!important;
	font-size: 24px;
	color: #000;
	margin:0 0 30px;
	text-transform: uppercase;
	opacity:0;
}
.morecolors {
	text-align: center;
	background: #333;
	padding: 18px 66px;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	display:inline-block;
	text-transform:uppercase;
	opacity:0;
}
.fitdetails:hover h2, .fitdetails:hover .morecolors {
	opacity:1
}
</style>
</head>
<body>
<a class="fitdetails" href="#test">
	<div class="shopnow-desc">
  	<h2>Welcome Text</h2>
  	<div class="morecolors">Shop Now</div>
	</div>
</a>
</body>
</html>

Yet another variation (too much spare time)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>koder</title>
    <style>
.outer {
    text-align:center;
}
.fitdetails {
    display:inline-table;
    width:412px;
    height:610px;
    border:5px solid #333;  /* Optional */
    border-spacing:20px 20px;
    background-image:url("http://lorempixel.com/412/610");
    background-size:cover;
    margin:0 .75em 1.5em;
}
.fitdetails .shopnow-desc {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:rgba(255,255,192,.75);
    opacity:0;
/*    outline:1px solid blue;  /* TEST Outline. To Be DELETED. */
}
.fitdetails:hover .shopnow-desc {
    opacity:1;
}
.shopnow-desc h2 {
    font-family:"Interstate-Bold"!important;
    font-size:24px;
    color:#666;
    text-transform:uppercase;
/*    outline:1px dotted red;  /* TEST Outline. To Be DELETED. */
}
.shopnow-desc a:link,
.shopnow-desc a:visited {
    display:inline-block;
    border-radius:6px;
    background:#666;
    color:#fff;
    font-weight:bold;
    font-size:16px;
    text-decoration:none;
    outline:none;
    padding:18px 66px;
/*    outline:1px solid yellow;  /* TEST Outline. To Be DELETED. */
}
.shopnow-desc a:hover {box-shadow:0 0 6px 2px #00f;}
.shopnow-desc a:active {box-shadow:0 0 6px 2px #f00;}
    </style>
</head>
<body>

<div class="outer">
    <div class="fitdetails">
        <div class="shopnow-desc">
            <h2>Welcome Text</h2>
            <div class="morecolors">
                <a href="#dummy">SHOP NOW</a>
            </div>
        </div>
    </div>
    <div class="fitdetails">
        <div class="shopnow-desc">
            <h2>Welcome Text</h2>
            <div class="morecolors">
                <a href="#dummy">SHOP NOW</a>
            </div>
        </div>
    </div>
    <div class="fitdetails">
        <div class="shopnow-desc">
            <h2>Welcome Text</h2>
            <div class="morecolors">
                <a href="#dummy">SHOP NOW</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>

I never could figure out what “morecolors” was for, but left it there.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.