Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically Center an Image in Text input

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #204848
    ErikAGriffin
    Participant

    I would like to center an ‘x’ image link vertically in my <input> field on the left.

    So I wrapped the input field in a div container with position relative, and then used absolute positioning to place the link over the input. However no matter what I do I cannot get the image to be centered vertically. I am in need of some assistance.

    http://codepen.io/ErikAGriffin/pen/pJVeKZ

    #204849
    Paulie_D
    Member

    Depends on what browser support you need.

    The fact the the wrapping link has no intrinsic widths means that you can’t use absolute position the image.

    flexbox makes it easy but support isn’t super deep.

    http://codepen.io/Paulie-D/pen/LVmWaG

    #204850
    Paulie_D
    Member

    Or you can use internal padding and make the image max-height:100%

    http://codepen.io/Paulie-D/pen/BNxWbJ

    Or adjust the image’s positon relatively.

    http://codepen.io/Paulie-D/pen/mJLWgm

    #204851
    ErikAGriffin
    Participant

    Hmm thanks I’ll try the various options and see what works best. Amazing as always Paulie.

    Just a side note, why exactly isn’t the vertical-align property coming into play here? Why is it not working?

    #204853
    Paulie_D
    Member

    vertical-align aligns inline (or inline-block) elements in a container with respect to each other.

    If there is only one it has nothing to line up with so nothing happens.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.