Results 1 to 5 of 5

Thread: How to vertical align middle

  1. #1
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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>

  2. #2
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    Quote Originally Posted by Neil1 View Post
    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.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Quote Originally Posted by styxlawyer View Post
    .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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Nov 2011
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Neil

    thanks for the solution.

    It works fine

    thanks
    vineet

    Quote Originally Posted by Neil1 View Post
    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.

Similar Threads

  1. vertical-align: middle not working
    By gib65 in forum CSS
    Replies: 3
    Last Post: 01-24-2015, 01:08 AM
  2. flexislide and vertical alignment (middle)?
    By thorirv in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 02-01-2010, 09:21 PM
  3. Resolved Vertical Middle align with search box
    By Ryan Fitton in forum CSS
    Replies: 0
    Last Post: 03-10-2009, 09:45 PM
  4. vertical-align in div
    By lord22 in forum CSS
    Replies: 10
    Last Post: 07-26-2008, 01:15 PM
  5. align text in middle of menu
    By geoffb in forum CSS
    Replies: 1
    Last Post: 10-01-2006, 09:22 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •