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

这一节用table实现居中是怎么做到的?只用margin:0 auto似乎不可以啊


<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>不定宽块状元素水平居中</title>

<style>

table{

    margin:0 auto;

}


/*下面是任务区代码*/

.wrap{

    background:#ccc;

    width:500px;

    margin:0 auto;

}


</style>

</head>


<body>

<div>

<table>

  <tbody>

    <tr><td>

<ul>

    <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

</table>

</div>


<div class="wrap">

  设置我所在的div容器水平居中  

</div>

</body>

</html>

正在回答

3 回答

只用margin:0 auto;确实做到了div居中,你可能是想让文本也居中,只需要这么写

.wrap{

    background:#ccc;

    width:500px;

    margin:0 auto;

    text-align:center;

}

就可以了。

垂直居中的话是要保证让height和line-height保持一致,你后面会学到。

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

qq_简单的旋律_03633652 提问者

非常感谢!
2016-07-17 回复 有任何疑惑可以回复我~

在里面添加<tr><td>标签,代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
    border:1px solid red;
    margin:0 auto;
}

/*下面是任务区代码*/
.wrap{
    background:#ccc;
  
}
</style>
</head>

<body>
<div>
<table>
  <tbody>
    <tr><td>
 <ul>
     <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
</table>
</div>

<table>
    <tbody>
        <tr>
            <td>
                <div class="wrap">
    设置我所在的div容器水平居中 
</div>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

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

.wrap{

    background:#ccc;/**/

    display:inline;    /*根据字符的长度自动调节行宽。进行不定宽元素的属性设置*/

    position:relative;    /*相对定位*/

    left:50%;    /*距离左边距为50%*/

}


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

举报

0/150
提交
取消

这一节用table实现居中是怎么做到的?只用margin:0 auto似乎不可以啊

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号