Another way for vertical-align:middle

HTML & CSS
1

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:
[URL=“http://editingtests.com/editing_tests/exam.php?id=3”]
http://editingtests.com/editing_tests/exam.php?id=3

2 

<form>
    <input type="radio" />
    <label>Some text here</label>
</form>



form{text-align:center;}

Did this not work?

3

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

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:

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.)

5

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

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.

7

Hi,

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

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


.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}




<td align='left' [B]class="test[/B]">

etc…


 <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

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?

9

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 :slight_smile:

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).