如何將文本和圖像放在％width div中的一行上？

我真的很苦惱，我不知道爲什麼。我想在1行上放置文本和圖像，並在100％寬度div內居中放置。這裏有一個的jsfiddle ..如何將文本和圖像放在％width div中的一行上？

2012-04-25 Dustin

float left * immediately *使您無法使用文本對齊中心。浮動元素會使元素呈現在文檔流之外 – 2012-04-25 20:23:31

@JonathanRomer no。請參閱下面的跳過答案 – 2012-04-25 20:25:15

這些陳述是不正確的。你仍然可以根據OP如何設置他的代碼來使用float和text-align。看到我的答案。 – 2012-04-25 20:36:35

浮動自動變成塊級元素。無法通過text-align: center將它們居中。你要做的唯一方法是讓它們像這樣內聯塊：display: inline-block。我加vertical-align: top;爲h在頂部。這個工作的例子是：http://jsfiddle.net/skip405/JnbeJ/4/

來源

2012-04-25 20:24:04 skip405

擊敗我http://jsfiddle.net/JnbeJ/5/ – 2012-04-25 20:24:40

包裝div允許他使用文本對齊中心內容。但包裝div也需要一個寬度或被製成內聯塊。 – 2012-04-25 20:34:24

@Matt K，把'text-align：center;'放在哪裏並不重要。它是繼承的。正如你可以從我的jsfiddle中看到的那樣，我中心'h1'和'img'而不是它們的包裝器。 – skip405 2012-04-25 20:42:55

你的圖片和文字不能浮動離開，並在同一時間集中...

來源

2012-04-25 20:23:39 Neil

他們可以因爲他包含在一個包裝div。 – 2012-04-25 20:31:17

你有一個div是100％的寬度（btw/divs是100％開始），並試圖將div居中，也是100％的寬度。你可以在內部div上放一個寬度，或者使其成爲inline-block。

Updated fiddle.

來源

2012-04-25 20:26:09

在你的情況下，你將使內嵌塊的'div'將居中，而'h1'和'img'不會通過'text-align：center'在該div中居中。看到這個綠色背景的div居中，其內容不是。 http://jsfiddle.net/skip405/JnbeJ/8/ – skip405 2012-04-25 20:49:07

@ skip405，它不居中，因爲你沒有居中它...在我的例子中，h1有一個流體寬度，你給它一個特定的寬度，沒有居中。不知道你想在這裏爭論什麼。 – 2012-04-25 20:53:28

請給我看看我的CSS中的確切的行，「不居中」的內容和確切的路線，其中h1是給定的具體寬度。 – skip405 2012-04-26 08:39:19

您使用的是有類名的包裝「居中」這樣反而使這兩個元素的（顯示：內聯塊），只需添加這種風格你包裝：

.centered {display: inline-block; margin: 0 auto;}

你的容器CSS中還有一個額外的（text-align：center;），不需要在那裏。

來源

2012-04-25 21:02:06

你其實也不需要保證金，我的不好。只需簡單地.centered {display：inline-block;}就可以實現。 – 2012-04-25 21:10:32

如何將文本和圖像放在％width div中的一行上？

回答

相關問題