Positioning arrows for picture viewing

HTML & CSS
1

Hey,

This is the situation:

What I am trying to achieve is to have the arrows(inputboxes) to float in the middle next to the picture. Is this possible without extra “invisible” div’s?

2

Without seeing your code I would guess that it would be possible with vertical-align:middle; or with margins. For v-a to work you will need to be in display:table or inline-block;

Please post a link to your page or a test case of the code you are using, otherwise we are just guessing.

3

Margins would probably do the trick :wink: - edit: they don’t


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/xhtml/1999">
<head>
<title>Foto-album</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Fotoalbum.css" />
<script type="text/javascript">
/* <![CDATA[ */

/* ]]> */
</script>
</head>
<body>
<div id="wrapper">
	<h1>Mijn Fotoalbum</h1>
	<div id="container">
		<input type="button" value="<<" onclick="vorige()" />
		<img id="afbeelding" src="1. Oef/12. Fotoalbum/Afbeeldingen/0.jpg" alt="De historische brug van Mostar" />
		<input type="button" value=">>" onclick="volgende()" />
	</div>
	<label id="description">Het onderwaterparadijs "The Deep" in Hull.</label>
</div>
</body>
</html>



/* RESET */

html,body,div,img,label,input{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
	vertical-align:baseline;
}

body{
	font:11pt/15pt arial,helvetica,sans-serif;
}

/* LAY-OUT */

div#wrapper{
	width:650px;
	text-align:center;
	margin:10px auto 0 auto;
}

label{
	border:1px solid green;
	display:block;
}

input{
	vertical-align:super;
	border:1px solid red;
	padding:10px;
}
4

The thing to do is add vertical-align: middle to the image, like so:

#container img {vertical-align: middle;}

See if that does the trick. :slight_smile:

5

Perfect, thank you both.

6

Well, an image is an inline element by default and you could set the vertical-align on it.

Testing without your actual image I had to use inline-block so I could set some dimensions for FF.

[B]#container img[/B]{
width:400px;
height:250px;
background:red;
[COLOR=Blue]vertical-align:middle;[/COLOR]
display:inline-block;
}

All you should need is this

#container img{vertical-align:middle;}
Edit:

It looks like ralph beat me to it. I knew it would work, just wanted to test it first :wink:

7

I don’t doubt you knew it Rayzur. Thank you for taking the time to test things out first before replying.

8

It looks like ralph beat me to it. I knew it would work, just wanted to test it first

Heh heh, I tested it by just using an image on my desktop. I like it when two people post the same solution, as it gives the OP the confidence that it’s a good solution. (And to tell you the truth, it gives me the confidence too, as Rayzur is much better at CSS than I am. :slight_smile: )

9

nevermind