無法管理元素的位置

我有一個Span標籤，其中包含一個IMG標籤和另一個Span標籤。我想內部Span標籤對齊到左側，IMG標籤集中對齊，再加上我希望兩個標籤都在中間垂直對齊，我似乎無法得到正確的結果...無法管理元素的位置

這是它的外觀（因爲外跨度標籤標註螢火顯示，它的拉伸整個表面是藍色的）：

enter image description here

正如你可以在圖片中看到，這兩個標籤並且它們也在容器的頂部對齊，我不希望這兩者中的任何一個。

這是標記：

enter image description here

這是變量的當前CSS：

.v-button-wrap { 
    height: 100%; 
    display: block; 
    padding: 6px 15px 0 9px; 
    vertical-align: middle; 
    line-height: normal; 
    text-align: center; 
} 

.v-icon { 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
    line-height: normal; 
    text-align: center; 
} 

.v-button-caption { 
    text-align: left; 
    line-height: normal; 
    vertical-align: middle; 
}

我離開了CSS不相關的我的問題，顏色，字體規格等。不用說，我不是CSS的王牌。我已經查找了一些涉及這個問題的指南，但我只能找到一個例子，其中div的全部內容都集中在這個中心上，而這不是我想要的。

有沒有人有良好的CSS知識在我的代碼中看到問題？或者有另一種解決方案來解決我的問題..？

謝謝！

編輯：這是根據請求整個佈局的屏幕截圖。對不起，我必須模糊一些東西...但是它們在任何情況下都不重要。 =）

enter image description here

EDIT2：我還是設法使用下面的CSS來解決我的問題：

.v-button-details-panel-header .v-button-wrap { 
    height: 100%; 
    text-align: inherit; 
    padding: 0px; 
} 

.v-button-details-panel-header .v-button-wrap .v-button-caption { 
    display: table-cell; 
    position: relative; 
    text-align: left; 
} 

.v-button-details-panel-header .v-button-wrap .v-icon { 
    display: table-cell; 
    position: relative; 
    top: 12px; 
    margin-left: auto; 
    margin-right: auto; 
}

我敢肯定，提出了建議dgvid本來是很好的一個靜態佈局。但由於面板和水平拉伸的按鈕移動取決於擴展和崩潰，這不是一個合適的解決方案。

來源

2011-12-02 AndroidHustle

製作您發佈的圖片確實很困難。也許你試圖獲得的截圖會有幫助，同時還有一個我們可以複製/粘貼的HTML代碼片段。 –

製作一個jsFiddle。 –

我可以發佈截圖。發佈HTML將非常困難..你看到我在Vaadin（GWT like框架）中開發，並且我實際上無法控制標記，它是從java代碼生成的，我在FireBug中看到的標記是瘋狂的跟...共事。標籤上的標籤....所以我已經添加的小型HTML代碼幾乎是我所能得到的。但是，這個張貼的帖子應該是唯一影響我所指的定位的東西。 – AndroidHustle

您可能需要將img和span.v_button_caption的CSS display屬性設置爲inline-block。

請參見這篇文章：Understanding vertical-align, or "How (Not) To Vertically Center Content"

至於另一種技術來達到預期的效果：如果您知道容器元素的高度，你知道元素的高度從CSS中心（可惜你張貼，它不會出現你這樣做），那麼你可以

給容器元素CSS屬性`的位置是：相對」
給該元素將要爲中心的CSS屬性position: absolute
將要集中元素的CSS top屬性設置爲（containerHeight/2） - （centeredEltHeight/2）。

來源

2011-12-02 15:24:11 dgvid

謝謝！我會看看這個。在我下班的路上，所以我不能立即測試它......我認識瞭解垂直對齊或「如何（不）垂直居中內容」，我在我自己的研究中發現了它，猜我會再看一遍！但我會在星期一回來嘗試一下 – AndroidHustle

好文章。這非常有用。 –

無法管理元素的位置

回答

相關問題