顯示站點圖標旁邊的居中文本

我想要得到的東西是這樣的：http://imgur.com/Bc72V4M

這裏是我的代碼：

<div id="topbar"> 

    <div class="image"> 

     <img src="images/ghwlogo.png"> 

    </div> 

    <div class="text"> 

     <h1>TEXT TEXT TEXT TEXT TEXT</h1> 

    </div> 

</div>

我已經試過浮動股利的頂欄，然後顯示在線，但它從來沒有水平顯示。

我很困惑。接下來的教程很簡單，但是當你需要弄清楚如何自己做這件事時，它就完全不同了。

我想我錯過了某個步驟。我覺得這應該很簡單，但事實並非如此。

來源

2015-07-21 Bug Senpai

怎樣的CSS外觀 – code

你缺少你的CSS –

我知道我失去了我的CSS，我刪除了我的代碼。無論如何，這是不正確的。 –

編輯：更新答案每@ Katana314答案。我維護了OP的標記。

#topbar { 
width: 100%; 
overflow: hidden; 
} 
.image { 
    display: inline-block; 
    vertical-align: middle; 
    border: 5px solid black; 
    height: 100px; 
    width: 100px; 
} 
.text { 
    display: inline-block; 
    vertical-align: middle; 
}

小提琴：https://jsfiddle.net/dgautsch/che0dtfk/

來源

2015-07-21 02:10:24 gautsch

img { 
 
    display: inline; 
 
    vertical-align: middle; 
 
    } 
 

 
.subhead { 
 
    display: inline; 
 
    vertical-align: middle; 
 
    }

<div> 
 
    <img src="http://dummyimage.com/100x100/000/fff"/> 
 
    <h1 class='subhead'> 
 
    TEXT 
 
    </h1> 
 
</div>

我刪除了一些HTML;我只想添加更多，當我無法想到如何僅通過CSS獲得效果。你可以添加一些回來，但你可能必須設置顯示：然後內聯一些內部元素。

通常，推杆元件水平的幾種不同的方式：

漂浮：刪除它從標準流佈局，並且可以與根元素的總高度干擾。以前是安置的首選方法，但我覺得有更好的選擇。

Display Inline：將元素看作文本。不能有自定義高度或其他各種屬性。

顯示inline-block的：通常，一個「修復所有」對我來說，當我想要的東西，水平放置，而是有其他的造型方面，例如高度，邊防等

位置絕對：您可以通過在其上設置position: relative將較高元素設置爲絕對定位的「相對元素」。就像浮動一樣，它會將其從佈局中移除，但它甚至可以重疊元素;對某些事情有用。不要過分依賴絕對像素數量。

就我而言，一旦水平放置，垂直對齊就是下一個問題。請記住，添加內容可能會使此塊非常高，因此您不能只說「垂直對齊到底」。將div中的所有元素想象爲段落中的字母;對於較小的那些，你要告訴它如何對齊這一個字母。對於最大的那個，你告訴它「字母」與其他比較的位置。因此，在圖像上設置垂直對齊方式也很重要。

來源

2015-07-21 02:12:27 Katana314

您可以使圖像和文本分開div，然後將它們都放在inline-block屬性下。但是，爲了格式化目的，文本div需要具有position: absolute屬性。

查看小提琴後，可以調整left位置屬性相應產生的空間。這裏是鏈接：https://jsfiddle.net/kuLLd866/。

HTML：

<body> 
    <div class="image"> 
     <img src="http://gfx2.poged.com/poged/game_logo_default_fix.png?2492"> 
    </div> 

    <div class="imagetext"> 
     <h1>Text text text</h1> 
    </div> 
</body>

CSS：

.image { 
    display: inline-block; 
} 

.imagetext { 
    position: absolute; 
    top: 50px; 
    display: inline-block; 
}

來源

2015-07-21 02:24:40 Shrey

顯示站點圖標旁邊的居中文本

回答

相關問題