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

为什么我这么写还是无法让图片在父div中垂直对齐

<style>

  .wrap{height:200px;background:#ccc}

  .w1{height:300px;background:yellow;}

  img{vertical-align:middle;}

</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>


<!--下面是代码任务区-->

<div class="w1">

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


正在回答

4 回答

因为你没有加<table><tbody><tr><td>这个,按照你的方法是根本没有让其垂直居中,只是对父元素进行了样式设置。

0 回复 有任何疑惑可以回复我~

解决了吗?我也是这样,第二种方法不管用

0 回复 有任何疑惑可以回复我~

<!DOCTYPE HTML>

<html>

<head>

<meta  charset="utf-8">

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

<style>

  body{

        background-color:blue;

  }

  .one{

        position:absolute;

        height:100%;

        background-color:green;


  }

  .two{

        height:500px;

        width:100px;

        background-color:red;


  }

  table,tr,td{

        height:100%;

  }

</style>

</head>


<body>

<div class="one">




<!--下面是代码任务区-->

<table><tr><td>

<div class="two"><table><tr><td>

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

</div></td></tr></table>

</div>

</body>

</html>


0 回复 有任何疑惑可以回复我~

.w1 {
     display:table-cell;
     background:#ccc;
     height:500px;
     vertical-align:middle;
 }

也有可能是浏览器问题、

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我这么写还是无法让图片在父div中垂直对齐

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