在html中顯示爲內嵌錯誤的文本

我正在嘗試在某個圖片旁邊的div工具欄中放置標題。問題在於我的文本放置不當，應該至少位於工具欄的頂部，而是位於底部並且不移動。我希望它在左邊的垂直中間靠近圖片。在html中顯示爲內嵌錯誤的文本

這裏是一個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; 

}

我試過垂直對齊和保證金，但「主」文不動...提前

由於之前我改變任何東西到表;）

[編輯]

謝謝大家對你的答案！我沒有考慮處理內容對齊（#titlemenu）而不是容器（#bar），它不是很合乎邏輯......

來源

2014-09-12 Goufalite

集'的高度vertical-align：top;'to'＃titlemenu' - http://codepen.io/anon/pen/ejumq **和**你也可以使用'line-height：0.9;'來達到更好的頂端位置 - http ：//codepen.io/anon/pen/Gudfe – Anonymous 2014-09-12 17:38:16

負上限值？ – 2014-09-12 18:16:19

您需要爲#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到裏面的所有東西，但如果你想讓它像你的描述一樣工作，那麼你去

來源

2014-09-12 18:01:19 Devin

您必須使用Chrome，隨着每個新版本的使用越來越差。對於Chrome，你必須將元素中的垂直對齊移除到更高元素的一側，我在http://codepen.io/anon/pen/duvwF上創建了一個新版本，它可以通過清理不需要的元素來跨瀏覽器工作 – Devin 2014-09-12 18:24:05

+ 1）哎呀！你是對的，我使用的是Chrome瀏覽器，我的解決方案無法在Firefox上運行，我沒有注意到它。您使用'width：40px;'兩次使用'#bar img'，但效果很好。 - http://codepen.io/anon/pen/FKfny – Anonymous 2014-09-12 18:48:08

@MaryMelody：事實上，你的評論是非常有用的，有時我忘記了跨瀏覽器的兼容性，你的評論讓我意識到這一點，所以它是合作努力:) – Devin 2014-09-12 22:06:37

添加這些行到#titlemenu在CSS

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

通過vertical-align:top，該塊被排列於母公司div頂部，設置padding以適應塊的高度與父div

Demo

來源

2014-09-12 18:14:58 Varun

在html中顯示爲內嵌錯誤的文本

回答

相關問題