1

When I apply 'border-bottom' to a 'span' element to underline it and if that the 'span' has 'image' in it with 'vertical-align: middle', the border cuts across the image! Is there anyway to maintain 'vertical-align: middle' and still run the border below the 'span'?

<html>
    <head>
        <style type="text/css">
            span.underline {
                font-size: 20px;
                border-bottom: 3px solid grey;
            }
            img.embeddedImage {
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <span class="underline"> (a) <img class="embeddedImage" src="logo.gif"></span>
    </body>
</html>
4

4 回答 4

5

Add display:block; to your span or turn the span into a div.

jsFiddle example.

Or...use display:inline-block;

jsFiddle example.

于 2012-05-04T17:25:08.603 回答
2 
span.underline {
                font-size: 20px;
                text-decoration: underline;
            }
于 2012-05-04T17:23:52.363 回答
2 
span { border-bottom: 1px solid; }​

Fiddle up

于 2012-05-04T17:26:44.853 回答
0

If just underlining the text isn't enough... {text-decoration:underline;}

If you set the image to have a higher z-index higher than the span, does it do what you need?

    <style type="text/css">
        span.underline {
            font-size: 20px;
            border-bottom: 3px solid grey;
            z-index: 1;
        }
        img.embeddedImage {
            vertical-align: middle;
            z-index: 2;
        }
    </style>
于 2012-05-04T17:26:21.333 回答