Bad positioned text with display inline in html - html

Question

I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...

Answer 1

You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go

Answer 2

Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo