为了账号安全,请及时绑定邮箱和手机立即绑定

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

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)-升级版
  • 参与学习       1226024    人
  • 解答问题       18236    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信