CODEWITHSUNDEEP
htmlcssimagealignment
Felipe
Felipe

Reputation: 35

align images with CSS

Hi i need to align the images with css I use a content called "boton" the link of the site is www.newprincess.cl and I need to align like this http://imageshack.us/f/69/btnr.jpg/ How can do that?? help me please very thanks

Upvotes: 0

Views: 1790

Answers (2)

Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13827

change your CSS as follow

#boton {
    height: 120px;
    width: 157px;
    margin-top: -5px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

#boton #oneimg {
    top:9px;
    position:absolute;
    text-align:center;
}

#boton #twoimg {
    top:38px;
    position:absolute;  
    text-align:center;
    margin-left: auto;      
    margin-left: 25px;

}

#boton #threeimg {
    top:58px;
    position:absolute;
    text-align:center;
    margin-left: 28px;      
}

And change your HTML code as follow

<div id="boton">
    <div id="threeimg"><img src="salir.png" border="0"></div>
    <div id="twoimg"><img src="entrar.png" border="0"></div>
    <div id="oneimg"><img src="18.png" border="0"></div>
</div>

Upvotes: 1

Blender
Blender

Reputation: 298176

Give your images each an id= property (I'm sure you'll be able to figure out the names I use):

#salir {
  position: relative;
  top: -16px;
}

#entrar-link {
  display: block;
}

#entrar {
  position: relative;
  top: -6px;
}

#boton {
  text-align: center;
}

Upvotes: 0

Related Questions