CSS Align image with input

Question

I have a little problem with my css, I can't align an image with a text input field. The site is live at http://jocolina.com/picemon/pokelocator.php

The CSS I have for the text input and image is:

#loginUTC{
  width:30%;
  height: 60px;
  font-family: Verdana;
  font-size: 30px;
  text-align:center;
  font-weight: bold;

  /*margin: 0 auto;*/
  border-color: #336688;
}

#magniIMG{
  display: inline;
  height: 60px;
  cursor: pointer;
}

#locator{
  margin: 0 auto;
  text-align:center;
  height:60px;
}

Where loginUTC is the text input, magniIMG is the image I want to algin with the input, and locator is the div in which both of the elements are.

AlexMeng · Accepted Answer · 2014-12-21 22:14:13Z

1

You can set both elements to vertical-align: bottom;.

#loginUTC{
  vertical-align: bottom;
}

#magniIMG{
  vertical-align: bottom;
}

answered Dec 21, 2014 at 22:14

AlexMeng

8338 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A.B · Accepted Answer · 2014-12-21 22:29:54Z

1

You can use margin-bottom in negative at image that will fix it

#magniIMG {
    display: inline;
    cursor: pointer;
    height: 60px;
    margin-bottom: -18px;
}

answered Dec 21, 2014 at 22:29

A.B

20.5k3 gold badges43 silver badges74 bronze badges

2 Comments

Jo Colina Over a year ago

Yes I also found that -18 was the solution, it is however very dependent on the screen, and might not work in mobile

A.B Over a year ago

@JoColina no it doesnt depend on screen. it depends on code and pixels will work fine till you have same heights setting. you can view by resizing browsers :)

James Hull · Accepted Answer · 2014-12-21 22:17:33Z

0

You could use floats to align the form elements with images like you are trying to achieve here. You'll also need to add some widths to the containing element and the input to align everything. Try -

#locator {
margin: 0 auto;
text-align: center;
height: 60px;
width: 545px;
}

#loginUTC {
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align: center;
font-weight: bold;
/* margin: 0 auto; */
border-color: #336688;
float: left;
}

#magniIMG {
/* display: inline; */
height: 60px;
cursor: pointer;
float: left;
}

answered Dec 21, 2014 at 22:17

James Hull

3311 gold badge3 silver badges10 bronze badges

2 Comments

James Hull Over a year ago

This will break the fluid layout though.

A.B Over a year ago

what happens then if it goes to left

Collectives™ on Stack Overflow

CSS Align image with input

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related