Question

我试图在一些图片旁边的div工具栏中添加标题。问题是我的文字放置不好，它应该至少在工具栏的顶部，而是在底部并且不会移动。我希望它在图片左边的垂直中间。

这是一个codepen：http://codepen.io/anon/pen/fDojK

一张照片： enter image description here

以下是标题栏的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">
...

风格：

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

}

我尝试了垂直对齐和边距但是＃34; Main＆＃34;文字没有移动......

在我将任何内容更改为表之前提前致谢;）

[编辑]

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

Answer 1

您需要为#picturesmenu和#titlemenu处理垂直对齐，如果您想要左侧，请删除该标题左侧的填充。然后使用inline-block元素。像这样：

使用交叉浏览器代码编辑

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

我已经分了你的CodePen

然而，一种更好的方法是为#bar提供一个display:block属性，然后将inline-block添加到内部的所有内容中，但是如果您希望它在您的描述中工作，那么您可以去< / p>

Answer 2

将这些行添加到#titlemenu

中的CSS

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

通过vertical-align:top，块与父div的顶部对齐，并设置padding以使块的高度适合父div的高度}

Demo

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

2 个答案: