SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align text vertical

    Please take a look at this page:

    http://www.ravelly.com/valign.html

    How do I align the text vertically in the middle of the block?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just remove float:left from the image and it will automatically centralise. You should make sure that the td is set to vertical-align:middle also in case that is not the default.

    td.yourclassname {vertical-align:middle}

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, removing "float:left" from the image did work.

    Another question, take a look again at my link. Like you can see the text goes under the image. I don't want this. I want all text to be centralized and all text to the right of the image, not under. Any one know how I can achieve this?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

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

    There are a number of ways you can do that but it depends on what the requirements are.

    The way I usually do this is simply to place that tick image as a background image on the container and set it at background-position 0 50%.
    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">
    .error {
    	width:450px;
    	margin:auto;
    	padding:10px 10px 10px 50px;
    	min-height:32px;
    	border:1px solid #000;
    	color:#000;
    	border-radius:5px;
    	text-align:left;
    }
    .success{
    	background:#9bdd74 url(http://www.ravelly.com/success.png) no-repeat 10px 50%;
    	color:#36750f;
    	border-color:#36750f;
    }
    </style>
    </head>
    
    <body>
    <div class="error success">Changes to your email preferences have been saved. Changes to your email preferences have been saved.</div>
    </body>
    </html>

    If you must have the image in the html then something like this:
    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">
    .error {
    	width:450px;
    	margin:auto;
    	padding:10px;
    	border:1px solid #000;
    	color:#000;
    	border-radius:5px;
    	text-align:left;
    }
    .success {
    	background:#9bdd74;
    	color:#36750f;
    	border-color:#36750f;
    }
    .error span {
    	display:table-cell;
    	vertical-align:middle;
    	padding:0 5px;
    }
    </style>
    </head>
    
    <body>
    <h1>IE8+</h1>
    <div class="error success"> <span><img src="http://www.ravelly.com/success.png" width="32" height="32"></span><span>Changes to your email preferences have been saved. Changes to your email preferences have been saved.</span></div>
    </body>
    </html>
    Or like this:

    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">
    .error {
    	width:450px;
    	margin:auto;
    	padding:10px;
    	border:1px solid #000;
    	color:#000;
    	border-radius:5px;
    	text-align:left;
    }
    .success {
    	background:#9bdd74;
    	color:#36750f;
    	border-color:#36750f;
    }
    .error span {
    	display:inline-block;
    	vertical-align:middle;
    	padding:0 5px;
    }
    .message{width:390px}
    </style>
    </head>
    
    <body>
    <h1>IE6+</h1>
    <div class="error success"> <span><img src="http://www.ravelly.com/success.png" width="32" height="32"></span><span class="message">Changes to your email preferences have been saved. Changes to your email preferences have been saved.</span></div>
    </body>
    </html>

  5. #5
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much. I do learn a lot from you guys when I post my problems on this forum.

    As you can see, I use tables to create layouts. I know I know, this is a very bad habit of mine and I am working on it!
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor


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
  •