嘗試使用align =「middle」在html中對齊圖像。圖像被對齊到左

我想在HTML中對齊的圖像中嘗試使用align =「middle」在html中對齊圖像。圖像被對齊到左

<img src="https://i.ytimg.com/vi/f5x3MaZ6fqQ/maxresdefault.jpg " align="middle" , width="740" height="382" />

但是圖像不斷被拉到屏幕的左側。正如朋友建議的那樣，我嘗試將它嵌套在div中，但它不起作用。這是一些明顯的noob錯誤，我正在做？

這裏是鏈接到代碼筆頁

http://codepen.io/jaygo/pen/JXZRJQ?editors=1100

也對不起提前如果我的問題是嚴重的結構。

來源

2016-04-20 Goharij

要水平對齊圖像或任何其他形式的內聯內容，請在父元素上使用CSS設置text-align: center。

align屬性已棄用，因此不應再使用此屬性。 middle是垂直而非水平對齊的描述。 HTML中的屬性之間不允許使用逗號字符。

來源

2016-04-20 14:13:49 Quentin

謝謝。只是爲了澄清。我需要在我的css中創建一個新的類「.text-align」，然後使用jquery定位父元素？ – Goharij

@Goharij - 編號「text-align」是屬性名稱。你會寫一個新的CSS規則集，其中包含一個匹配圖像父元素的選擇器，並將該規則放在那裏。你根本不需要使用JavaScript（除非你想動態修改它，但是在這種情況下，你最好把所有東西都放在樣式表中，然後用JS修改屬於類的元素）。 – Quentin

-1

從您的標記中刪除逗號，它不是有效的HTML。Align是一個不推薦的財產，所以這應該使用CSS來完成。

如果您使用的是樣式表（推薦！），你可以使用以下內容：

img{ display: block; margin: 0 auto; } 
//this will apply to all images in your site. I would use a class instead

或者，如果你不使用樣式表，你可以做到這一點內嵌

<img src="https://i.ytimg.com/vi/f5x3MaZ6fqQ/maxresdefault.jpg " width="740" height="382" style=" display: block; margin: 0 auto;" />

編輯：道歉Quentin是對的，你也需要將圖像設置爲'display：block'。我已經更新了我的答案以反映這一點。這裏也是一個工作小提琴。 https://jsfiddle.net/pcfa8oLL/

來源

2016-04-20 14:29:30

非常感謝。這真的說明了它。 – Goharij

這是行不通的。自動邊距對「display：inline」元素沒有影響（默認情況下爲圖像）。 – Quentin

如果能解決您的問題，請將此標記爲答案。 –

嘗試使用align =「middle」在html中對齊圖像。圖像被對齊到左

回答

相關問題