How to vertical align middle

Printable View

04-16-2015, 01:32 PM
vinpkl

How to vertical align middle

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

Code:

<!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>
04-16-2015, 01:51 PM
Neil1

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.
04-16-2015, 02:01 PM
styxlawyer

Quote:

Originally Posted by Neil1

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.
04-16-2015, 04:41 PM
Beverleyh

Quote:

Originally Posted by styxlawyer

.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.
04-17-2015, 02:00 PM
vinpkl

Hi Neil

thanks for the solution.

It works fine

thanks
vineet

Quote:

Originally Posted by Neil1

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.