How to vertical align middle [Archive]

vinpkl

04-16-2015, 01:32 PM

hi

I want to vertical align middle the product name and price

how to do it.

Here is my code which is not aligning it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0px; padding:0px;}
.prod-seller{width:32%; float:left; border:1px solid #ada7a7; background-color:#FFFFFF; padding-bottom:15px; margin-right:1.18%; }
.prod-seller-thumb{height:300px; width:200px; float:left; display:block; background-color:#999999; font-size:60px}
.prodinfo{height:300px; line-height:300px; width:45%; text-align:left; float:left}
.prod-seller-name{font-size:1.2em; line-height:1.2em; }
.prod-seller-price{font-size:1.4em; color:#862e0f; line-height:normal; }
</style>
</head>

<body>

<div class="prod-seller">

<div class="thumb-name">
<p class="prod-seller-thumb">image place holder here</p>

<div class="prodinfo">
<p class="prod-seller-name">Product Name will come here </p>
<p class="prod-seller-price">NZ$ 243</p>
</div>

</div>
</div>

</body>
</html>

Neil1

04-16-2015, 01:51 PM

I think:

.prod-seller-name{
margin-top:50%;
transform: translate(0, -50%);
}

should do it. The margin-top should move it 50% of the way down the parent <div> then the translate(0, -50%) should move it back up by 50% of its own height.

styxlawyer

04-16-2015, 02:01 PM

I think:

.prod-seller-name{
margin-top:50%;
transform: translate(0, -50%);
}

should do it. The margin-top should move it 50% of the way down the parent <div> then the translate(0, -50%) should move it back up by 50% of its own height.

.prod-seller-name{
margin: auto;
}

... should centre it both vertically and horizontally.

Beverleyh

04-16-2015, 04:41 PM

.prod-seller-name{
margin: auto;
}

... should centre it both vertically and horizontally.
Unfortunately this would not work. margin:auto; does not vertically center. In this case it will not horizontally center either because .prod-seller-name is a paragraph, which is a block-level element at 100% wide. Auto-ing the left and right margin will have no effect on something that is 100% wide. If the user wanted to center horizontally (not requested in their first post) they would use text-align:center; in this instance.

vinpkl

04-17-2015, 02:00 PM

Hi Neil

thanks for the solution.

It works fine

thanks
vineet

I think:

.prod-seller-name{
margin-top:50%;
transform: translate(0, -50%);
}

should do it. The margin-top should move it 50% of the way down the parent <div> then the translate(0, -50%) should move it back up by 50% of its own height.