Hello Windbrand,
Floats are great for putting elements side by side but you'll have to do the math to center them.
Look at this approach (the margin is what controls the space between them)
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
.container{
width: 950px;
padding: 10px 10px 50px;
text-align: center;
background: #333;
}
.container > div {
height: 350px;
width: 125px;
margin: 0 5px;
display: inline-block;
background: #f00;
}
</style>
</head>
<body>
<div class="container">
<div id="pic1">
<img src="pictures/characters/1.png">
<br>
<br>
<span id="pic1text">text1</span>
</div>
<div id="pic2">
<img src="pictures/characters/2.png">
<br>
<br>
<span id="pic2text">text2</span>
</div>
<div id="pic3">
<img src="pictures/characters/3.png">
<br>
<br>
<span id="pic3text">text3</span>
</div>
<div id="pic4">
<img src="pictures/characters/4.png">
<br>
<br>
<span id="pic4text">text4</span>
</div>
<div id="pic5">
<img src="pictures/characters/5.png">
<br>
<br>
<span id="pic5text">text5</span>
</div>
<!--end .container--></div>
</body>
</html>