Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Mar 2009
    Posts
    27
    Member #
    18564
    Hi everybody,

    I am really sorry to waste your time with this but I am completely stuck. I think I have read about 20 different comments about how to vertically center an image using CSS but I CAN´T DO IT!

    Well, please have a look to the next webpage:

    http://pedaldoc.com/html/website2.html

    Ignore the colors as I am just trying to do the layout right first.

    The thing is that in that page you will be able to see a white box in the upper top right corner which contains text saying "The human body" and an image of a "human body". The text is nicely centered, but I can´t find a way of vertically centering the image which always sticks to the top of the white box.

    I have tried everything I have found in the net to no avail.

    Would any of you be so kind as to give a hand with this? I am about to go blind after hours trying to find a way of doing it...

    Thanks a lot in advance.

    Ivánmax

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    You're correct that CSS (as it is now) makes it really hard to
    vertically center an image. So here's what I would do ...

    Make one class for all of the boxes you will use ... so they are all
    the same size. Then, make all of your link images the same size,
    and position them the same in each box.

    If you come up with a standard layout for each link, it will not only allow
    control of position, but make it easier to add more links later on.
    It looks like you're creating a new <div> for each link you add ...
    that's going to be a nightmare.

    OTHER THOUGHTS ...
    You can use a smaller font, and "MATH" is plural for "MATH".

    If you know some PHP, you could make a script that creates your
    page dynamically from a list of links in one text file. That means other
    teachers could add links to your list online (through an online form).
    You would not have to edit your .html file every time you wanted to add a new link.


  4. #3
    Junior Member
    Join Date
    Mar 2009
    Posts
    2
    Member #
    18614
    I had the same problem. I used the code from this website to get the effect you're looking for:

    http://brunildo.org/test/shrink_center_4.html


    Sadly, the site doesn't provide an easy-to-use way of copying the code, so you'll have to dig it out yourself, but it works!


    I hope that solved your problem.

    -Damien

  5. #4
    Junior Member
    Join Date
    Mar 2009
    Posts
    21
    Member #
    18550
    You can check the tutorial on background position in http://www.w3schools.com/css/css_background.asp

    I hope it helps.

  6. #5
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    set negative margins for your images, in the css.

    For instance:

    Code:
    <div id="the_human_body">
    <img src="body.jpg" width="300" height="20" alt="" /> text text text text
    </div>
    
    div#the_human_body
    {
    border: 1px solid #990000;
    padding: 10px 10px 10px 10px;
    font-family: arial;
    color: #000000;
    font-size: 10px;
    }
    
    div#the_human_body img
    {
    margin-bottom: -5px;
    }
    This may need some playing around with, depending on your image sizes etc.

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    actually I just re-read your post and thought that my post probably didn't answer your question. what I posted was to make the image center vertically, but that was against the text. But margins and padding is the key. setting them to 0 auto may work.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com