CODEWITHSUNDEEP
htmlcssforms
Jo Colina
Jo Colina

Reputation: 1924

CSS Align image with input

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.

Upvotes: 0

Views: 1590

Answers (3)

A.B
A.B

Reputation: 20445

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

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

Upvotes: 1

James Hull
James Hull

Reputation: 331

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

Upvotes: 0

AlexMeng
AlexMeng

Reputation: 833

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

#loginUTC{
  vertical-align: bottom;
}

#magniIMG{
  vertical-align: bottom;
}

Upvotes: 1

Related Questions