html中显示为内联的定位错误的文本

我试图把标题放在一些图片旁边的div工具栏中。问题是我的文本位置不好，它至少应该在工具栏的顶部，但它在底部，不会移动。 我想它是在垂直的中间在左边靠近图片

这是一个密码笔：

还有一张照片：

以下是标题栏的html部分：

<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">
...

我尝试了垂直对齐和边距，但“主”文本没有移动

在我把任何东西换成桌子之前，先谢谢你；）

[编辑]

---

谢谢大家的回答！我没有想到要处理内容的对齐（#titlemenu）而不是容器（#bar），这不是很合乎逻辑…

您需要对

#picturesmenu

和

#titlemenu

进行垂直对齐，如果您希望标题向左，请删除该标题的空白。然后使用

内联块

元素。像这样：

使用跨浏览器代码编辑

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

我用叉子叉了你的头发

---

然而，更好的方法是为#bar提供一个

display:block

属性，然后将

inline block

添加到内部的所有内容中，但如果您希望它像您的描述中那样工作，现在，您需要对

#picturesmenu

和

#titlemenu

进行垂直对齐，如果希望标题向左，请删除该标题的左侧填充。然后使用

内联块

元素。像这样：

使用跨浏览器代码编辑

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

我用叉子叉了你的头发

---

然而，更好的方法是为#bar提供一个

display:block

属性，然后将

inline block

添加到内部的所有内容中，但如果您希望它像您的描述中那样工作，现在，您需要对

#picturesmenu

和

#titlemenu

进行垂直对齐，如果希望标题向左，请删除该标题的左侧填充。然后使用

内联块

元素。像这样：

使用跨浏览器代码编辑

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

我用叉子叉了你的头发

---

然而，更好的方法是为#bar提供一个

display:block

属性，然后将

inline block

添加到内部的所有内容中，但如果您希望它像您的描述中那样工作，现在，您需要对

#picturesmenu

和

#titlemenu

进行垂直对齐，如果希望标题向左，请删除该标题的左侧填充。然后使用

内联块

元素。像这样：

使用跨浏览器代码编辑

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

我用叉子叉了你的头发

---

然而，更好的方法是给#bar一个

display:block

属性，然后将

inline block

添加到内部的所有内容中，但是如果您希望它像您的描述中那样工作，那么您可以将这些行添加到

CSS

中的

标题菜单中

padding:10px;
display:inline-block;
vertical-align:top;

通过
vertical align:top
，块与父
div
的顶部对齐，您可以设置
padding
以使块的高度与父
div
的高度相适应

将这些行添加到
CSS

padding:10px;
display:inline-block;
vertical-align:top;

通过
vertical align:top
，块与父
div
的顶部对齐，您可以设置
padding
以使块的高度与父
div
的高度相适应

将这些行添加到
CSS

padding:10px;
display:inline-block;
vertical-align:top;

通过
vertical align:top
，块与父
div
的顶部对齐，您可以设置
padding
以使块的高度与父
div
的高度相适应

将这些行添加到
CSS

padding:10px;
display:inline-block;
vertical-align:top;

通过
vertical align:top
，块与父
div
的顶部对齐，您可以设置
padding
以使块的高度与父
div
的高度相适应

设置
垂直对齐：顶部
到
#titlemenu
-您还可以使用
行高：0.9以获得更好的顶部位置-负顶部边距值？设置
垂直对齐：顶部
到
#titlemenu
-您还可以使用
行高：0.9以获得更好的顶部位置-负顶部边距值？设置
垂直对齐：顶部
到
#titlemenu
-您还可以使用
行高：0.9以获得更好的顶部位置-负顶部边距值？设置
垂直对齐：顶部
到
#titlemenu
-您还可以使用
行高：0.9为了获得更好的顶部位置-负顶部边距值？您必须使用Chrome，随着每个新版本的出现，Chrome的性能越来越差。对于Chrome，你必须删除垂直对齐的元素到更高元素的一侧，我在网站上制作了一个新版本，通过清理不需要的元素+1）Oops跨浏览器工作！你说得对，我用的是Chrome，我的解决方案在firefox上不起作用，我没有注意到，哈哈。你用的是
width:40px两次到
#条img
但效果很好。-@MaryMelody：事实上，你的评论非常有用，有时我忘记了跨浏览器的兼容性，你的评论让我意识到了这一点，所以这是一个协作的努力：）你一定在使用Chrome，每一个新版本都在变得越来越糟糕。对于Chrome，你必须删除垂直对齐的元素到更高元素的一侧，我在网站上制作了一个新版本，通过清理不需要的元素+1）Oops跨浏览器工作！你说得对，我用的是Chrome，我的解决方案在firefox上不起作用，我没有注意到，哈哈。你用的是
width:40px两次到
#条img
但效果很好。-@玛丽梅洛蒂：作为马特