亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

圖片無法垂直居中,求教一下各路大神解答

http://img1.sycdn.imooc.com//5e38571a0001f68508810565.jpgimg的父級div.pic設置了vertical-align:middle;但是沒有圖片垂直居中

正在回答

2 回答

你沒有用<table>標簽嗎?

0 回復 有任何疑惑可以回復我~
#1

愛前端的小鑫 提問者

css 中有一個用于豎直居中的屬性 vertical-align,在父元素設置此樣式時,會對inline-block類型的子元素都有用。下面看一下例子: 我們可以用這個方法嗎
2020-02-04 回復 有任何疑惑可以回復我~
#2

慕圣6122783 回復 愛前端的小鑫 提問者

一個div中由很多行很多元素組成,vertical-align只作用于在同一行內的元素,它的垂直并不是相對于整個div而言的。一種解決方法是把 vertical-align:middle 放到一個單元格元素,即table的td元素中,它的垂直居中顯示是沒任何問題的,因為它表示相對于該行的垂直高度居中顯示。另外我們可以設置元素style中的 line-heght 值為其父元素div的height值,這樣 vertical-align:middle 就會使元素內容垂直居中。https://blog.csdn.net/wkx8668/article/details/86696054?
2020-02-04 回復 有任何疑惑可以回復我~
#3

愛前端的小鑫 提問者

謝謝已采納
2020-02-04 回復 有任何疑惑可以回復我~

<!DOCTYPE HTML>

<html>

<head>

<meta? charset="utf-8">

<title>父元素高度確定的多行文本</title>

<style>

? .wrap{height:300px;background:#ccc}

</style>

</head>


<body>

<table><tbody><tr><td class="wrap">

<div>

? ? <p>看我是否可以居中。</p>

? ? <p>看我是否可以居中。</p>

? ? <p>看我是否可以居中。</p>

? ? <p>看我是否可以居中。</p>

? ? <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>


<!--下面是代碼任務區-->

<table><tbody><tr><td class="wrap">

<div>

? ? <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>

</div>

</td></tr></tbody></table>

</body>

</html>


0 回復 有任何疑惑可以回復我~
#1

愛前端的小鑫 提問者

有沒有不使用<table>標簽的方法呢
2020-02-04 回復 有任何疑惑可以回復我~
#2

愛前端的小鑫 提問者

css 中有一個用于豎直居中的屬性 vertical-align,在父元素設置此樣式時,會對inline-block類型的子元素都有用。下面看一下例子: 我們可以用這個方法嗎
2020-02-04 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
初識HTML(5)+CSS(3)-升級版
  • 參與學習       1228750    人
  • 解答問題       19080    個

HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義

進入課程

圖片無法垂直居中,求教一下各路大神解答

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號