With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?


Tags: html,css,alignment,line

Problem :

I'd like the image on the left to be adjacent to the horizontal line on the right (bottoms lining up flush). It should be responsive so that the line can change widths as needed. Right now, the image is sitting on top of the line, not beside it.

Edit: This will give more clarification. The orange piece is an image. The thin grey line is the line. http://screencast.com/t/beMBRhpBpZ

Here is the HTML

<div>
    <img src="image.png">
    <hr>
</div>

Here is the CSS

img {
    float:left
}
hr {
    width:100%
}

How to make this happen? The HTML/CSS can be changed as required. But should be cross-browser compatible and responsive.



Solution :

div {
border-bottom: 3px solid #000;
}

img {
    position: relative;
    bottom: -3px;
}

you dont really need hr. border-bottom is what you needed.


    CSS Howto..

    How to override CSS :hover?

    CSS: How to make left float div to adjust height dynamically? [duplicate]

    How to place the text after thumbnails at the bottom?

    How to apply inverse text mask with CSS

    How do I get ui-sortable to only work on a specific id in CSS?

    CSS how to translate an image up, and have the div adjust to the new size?

    CSS how to change color of a specific primary-panel in a if-block

    How can I add image to facebook login button?

    How to create correct .css for Html.TextBoxFor

    HTML/JavaScript - How can I hide the links and cursor?

    How to apply CSS directly to DOM TextNodes?

    How to prevent span tags overlapping each other?

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    How to force css borders to display on layered page?

    how to make sure that that grid layout row adjusts the height automatically as per content

    How to remove an element without id

    How to show a div thats hidden by css on button click

    hide/show multiple div elements using jquery

    How can I rotate(or change) background image using CSS and Javascript

    How to refine CSS media types and properties?

    Bootstrap 3 Glyphicons not showing correctly

    How to target individually nested elements using CSS

    How do I make this slider go faster?

    CSS: How to align text to the center of the image (left side)

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    how to give css for following data

    how to use namespaces in css?

    How to reduce css http requests?

    I have 3 divs in one row, how do I get the middle div to stay an exact width while the left and right div shrink in as the screen resizes smaller?

    Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?