SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another way for vertical-align:middle

    I need to get the text and an image on the page below to align with the middle of the enlarged radio buttons but I can't get vertical-align:middle to work right. Is there another way? I have been at this for days and I am about to give up and go back to tables. (not really) Your help or friendly advice is welcome.

    Click the link below and then click "Start Test" to see the page I am referring to and look at the first question:

    http://editingtests.com/editing_tests/exam.php?id=3
    EditFast
    Any Document --> Any Time!
    Web Site Copy Editing & Proofreading


  2. #2
    SitePoint Enthusiast adityamenon90's Avatar
    Join Date
    Apr 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <form>
        <input type="radio" />
        <label>Some text here</label>
    </form>
    Code:
    form{text-align:center;}
    Did this not work?

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem is caused by using a div to hold the image of the text. A div is a block element so it drops to the next line. Can you put the whole lot in the same line without the div?

  4. #4
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    The problem is caused by using a div to hold the image of the text. A div is a block element so it drops to the next line. Can you put the whole lot in the same line without the div?
    Thanks for responding. The div is used for the background image which holds the actual question and a transparent blank is displayed over the image to hide the actual image and give us some protection from having the questions copied.
    Here is the actual code:

    Code:
    A. <div style="background-image: url(/editing_tests/images/answer77a.gif);background-repeat:no-repeat;vertical-align:
    middle;"><img src="/editing_tests/images/answer77ab.gif"></div>
    I can't change the form as it is inside an application template which is used to generate a variety of tests. If I change it there, then ALL tests will be changed.
    (Please note, this thread is NOT about the good and bad of trying to protect your images or whether you can or can't or should or shouldn't. This is a test which I want to protect as much as possible.)
    EditFast
    Any Document --> Any Time!
    Web Site Copy Editing & Proofreading


  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Change the div to a span and then use display:inline-block on the span so that it can take dimensions to match the required image then set vertical-align:middle on the input, span and b elements.

  6. #6
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Change the div to a span and then use display:inline-block on the span so that it can take dimensions to match the required image then set vertical-align:middle on the input, span and b elements.
    Thanks for this Paul. I thought this would work and it will if I have just one image or if all images are the same dimensions but I have a few hundred images and each one is different in size. I think that means I would have to create a new "span" class for each image right? In which case it will work, but will make things very tedious to implement and to make changes later if necessary because this is done through an application and I do not have access to the HTML. ( I do if I export the test out of the application, but then I can't use the other resource that the application provides such as recording of scores, login page and password management etc. At least I think this is the case.
    EditFast
    Any Document --> Any Time!
    Web Site Copy Editing & Proofreading


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

    I thought you had a blank image holding the div open?

    If so then you don't need to set heights and widths.

    Code:
    .test b,.test input,
    .test div,.test img{
        display:inline-block;
        vertical-align:middle;
        margin:0;
    }
    * html .test div{display:inline}
    *+html .test div{display:inline}
    Code:
    <td align='left' class="test">
    etc...

    Code:
     <br>
                        <input type=radio name=question115 value=457>
                        <b>A.</b>
                        <div style="background-image: url(http://editingtests.com/editing_tests/images/answer77a.gif);background-repeat:no-repeat;"><img src="http://editingtests.com/editing_tests/images/answer77ab.gif"></div>
                        <br>
                        <input type=radio name=question115 value=458>
                        <b>B.</b>
                        <div style="background-image: url(http://editingtests.com/editing_tests/images/answer77b.gif);background-repeat:no-repeat;"><img src="http://editingtests.com/editing_tests/images/answer77bb.gif"></div>
                        <br>
                        <input type=radio name=question115 value=459>
                        <b>C.</b>
                        <div style="background-image: url(http://editingtests.com/editing_tests/images/answer77c.gif);background-repeat:"><img src="http://editingtests.com/editing_tests/images/answer77cb.gif"></div>
                        <br>
                        <input type=radio name=question115 value=460>
                        <b>D.</b>
                        <div style="background-image: url(http://editingtests.com/editing_tests/images/answer77d.gif);background-repeat:no-repeat;"><img src="http://editingtests.com/editing_tests/images/answer77db.gif"></div>
                        <br>
    You can leave them as divs as above but its not very semantic.

    However, I would consider rewriting those sections as the text should be in a label element as it relates to the input and will allow the control to be selected via clicking the label. Also be careful with your missing quotes and units in the css as some browsers will treat dimensions without units as zero (all browsers will treat them as zero ion a strict docytype) .

  8. #8
    SitePoint Zealot boballoo's Avatar
    Join Date
    Dec 2001
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi, I thought you had a blank image holding the div open?
    No, there is a background image which I use the div for, and then a blank, transparent image on top of that the exact same size as the image under it. I will try your suggestion but maybe if I specif the dimensions of the blank image, I don't need to specify them in the div?
    EditFast
    Any Document --> Any Time!
    Web Site Copy Editing & Proofreading


  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    and then a blank, transparent image on top of that the exact same size as the image under it
    Then the answer was Yes and not No wasn't it lol

    If you have a blank image the exact same size as the background image then it must intrinsically sized to fit already - or did I miss something (...more than likely).


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
  •