Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How to float text right and center vertial of image



    How do I get text to float in the center and right of this image?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you show your code? Floated elements should come first in your markup.
    Teed

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Can you show your code? Floated elements should come first in your markup.
    Thanks - in fact i don't have any code! I was wondering if there is a recommened way of doing this?

    I would normally have done: <img src="file.jpg" align="left" /> Then text here.

    It's the bit of making the line of text float center and vertical of the image that I don't even know where to begin.

    THANKS!

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I think this is the answer - do you agree?

    CSS:

    Code:
    img.middle {
        vertical-align:middle;
        margin: 5px;
    }
    HTML

    Code:
    <img src="images/yourimagefile.jpg" class="middle" />

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    One way here is to use display:table-cell. There's an image on the left and a caption on the right, and both are to be vertically centered. They can each be put in spans which receive display: table-cell, with their parent block element receiving display:table. No floating needed for this way.

    Vertical centering still works if the caption wraps onto multiple lines. The general method does not work in IE6-7 however, as they do not support those display table properties. There are workarounds for legacy IE if needed though.

    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>Vertical Centering</title>
    <style type="text/css">
    div.centered { display: table;
                   /* change block parent's width & height to suit */
                   height: 100px; width: 300px; 
                   border: 1px solid black; }
    span         { display: table-cell;
                   vertical-align: middle; }
    img          { margin: 5px; }
    </style>
    </head>
    <body>
      <div class="centered">
        <span>
          <img src="images/yourimagefile.jpg"" alt="yourimage">
        </span>
        <span>Vertically Centered</span>
      </div>
    </body>
    </html>

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Why use table-cell? It's both unsemantic and limits browser support. The following method works the same in ie6:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			body {
    				font: 15px Arial, Helvetica, sans-serif;
    			}
    			
    			.rada {
    				margin: 50px;
    				width: 500px;
    			}
    			.rada img, .rada div {
    				vertical-align: middle;
    			}
    			.rada div {
    				width: 350px;
    				
    				display: -moz-inline-block;
    				display: inline-block;
    				*display: inline; zoom: 1;
    				
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="rada">
    			<img src="http://images1.cliqueclack.com/tv/wp-content/uploads/2010/07/calvin-and-hobbes-dancing-calvin-4-150x150.jpg" /><div>
    				Growing up, I read Calvin and Hobbes a lot. Let's see if multiple lines center... Yes! they do!
    			</div>
    		</div>
    	</body>
    </html>
    Notice that I left the starting <div> behind the <img /> tag, this is to remove the 4px white space, to make it go right up against the image. If you didn't know, inline and inline-block elements started on new lines:

    Code:
    <span></span>
    <!-- when viewed in a browser there will be a 4px space between these elements -->
    <span></span>
    have a 4px margin space between them (the amount varies on your font)

    Code:
    <span></span><span></span>
    this will not have any space, also written as:

    Code:
    <span></span><span>
    </span>
    Last edited by Sammy12; 03-09-2012 at 05:57 AM.


  •  

    Posting Permissions

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