SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can i solve this vertical-centering issue with JS? (JS noob)

    I have done this fiddle, where I'm trying to solve it with CSS, but it doesn't seem to work out.

    http://jsfiddle.net/pYMYz/14/

    The thing I want to do is have the paragraph beeing vertically centered. The parents height depends on the height of the image, which is responsive. I have tried table, table-cell but it is not working out for me.

    I guess you could use javascript to estimate the height of the paragraph then put margin-top: - half that amount, the thing is I don't know how to do this.

    Would be really grateful for help with this=)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I think we've answered this same question about 4 times now

    Here's another version.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body, html, p {
    	padding: 0;
    	margin: 0;
    }
    .parent {
    	width: 100%;
    	background: #eee;
    	overflow: hidden;
    }
    .parent img {
    	width: 49%;
    	vertical-align:middle;
    	display:inline-block;
    }
    .parent p {
    	display: inline-block;
     *display:inline;/* ie7 hack for inline-block remove if not supported*/
     *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
    	vertical-align: middle;
    	width:49%;
    }
    </style>
    </head>
    
    <body>
    <div class="parent"> 
    		<img src="http://placehold.it/350x150" />
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    I think we've answered this same question about 4 times now

    Here's another version.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body, html, p {
    	padding: 0;
    	margin: 0;
    }
    .parent {
    	width: 100%;
    	background: #eee;
    	overflow: hidden;
    }
    .parent img {
    	width: 49%;
    	vertical-align:middle;
    	display:inline-block;
    }
    .parent p {
    	display: inline-block;
     *display:inline;/* ie7 hack for inline-block remove if not supported*/
     *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
    	vertical-align: middle;
    	width:49%;
    }
    </style>
    </head>
    
    <body>
    <div class="parent"> 
    		<img src="http://placehold.it/350x150" />
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p>
    </div>
    </body>
    </html>
    hehe hmm I think there is a slight difference between my topics at least=) Considering i couldn't solve this issue with the solution for the other centering problem=)


    Thanks for your solution btw, BUT the image and the paragraph has to stay in their separate parents, So I can't inline them I guess?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    Considering i couldn't solve this issue with the solution for the other centering problem=)
    I believe I solved all your other centering questions that I contributed in. You haven't yet replied to the last answer I gave in one of your other threads.

    Thanks for your solution btw, BUT the image and the paragraph has to stay in their separate parents, So I can't inline them I guess?

    No difference. Just apply the styles to the parent of those two elements instead.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body, html, p {
    	padding: 0;
    	margin: 0;
    }
    .parent {
    	width: 100%;
    	background: #eee;
    	overflow: hidden;
    }
    .child {
    	width: 49%;
    	vertical-align:middle;
    	display:inline-block;
     *display:inline;/* ie7 hack for inline-block remove if not supported*/
     *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
    }
    .child img{width:100%;height:auto}
    .parent p {margin:5px;}
    </style>
    </head>
    
    <body>
    <div class="parent"> 
    	<div class="child"><img src="http://placehold.it/350x150"></div>
    		<div class="child"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p></div>
    </div>
    </body>
    </html>

    or with display:table-cell.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body, html, p {
    	padding: 0;
    	margin: 0;
    }
    .parent {
    	width: 100%;
    	background: #eee;
    	overflow: hidden;
    }
    .child {
    	width: 49%;
    	vertical-align:middle;
    	display:table-cell;
     *display:inline;/* ie7 hack for inline-block remove if not supported*/
     *zoom:1.0;/* ie7 hack for inline-block remove if not supported*/
    }
    .child img{width:100%;height:auto}
    .parent p {margin:5px;}
    </style>
    </head>
    
    <body>
    <div class="parent"> 
    	<div class="child"><img src="http://placehold.it/350x150"></div>
    		<div class="child"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et odio est. Suspendisse pulvinar blandit urna, a adipiscing est porttitor nec. </p></div>
    </div>
    </body>
    </html>
    This is just basic css. No need for JS

  5. #5
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I believe I solved all your other centering questions that I contributed in. You haven't yet replied to the last answer I gave in one of your other threads.




    No difference. Just apply the styles to the parent of those two elements instead.


    This is just basic css. No need for JS
    Forgot to say thanks for the help, it worked=)


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
  •