leaf_J
2019-09-27 17:18
采纳率: 60%
浏览 574

html中margin的自适应问题

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面练习</title>
    <style>
        *{margin:0;padding:0;}
        img{display:block;}
        ul li{list-style:none;}
        a{text-decoration:none;color:#333333;}
        a:hover{color:#84D4FF;text-decoration:underline;}
        h1,h2,h3,h4,h5,h6{font-size: 14px;font-family:微软雅黑;font-weight:normal;}

        #main{width:278px;border:1px #dbe2ea solid;margin:200px;}
        #title1{height:36px;border-bottom:1px #dbe2ea solid;line-height: 36px;margin:0 auto;}
    </style>

</head>
<body>
    <div id="main">
        <h1 id="title1">
            <a href="#">移动标题</a>
        </h1>
    </div>
</body>
</html>

明明我在#title中设置了margin:0 auto;左右自适应了,但移动标题却不能居中显示?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 学习的态度 2019-09-27 17:30
    已采纳

    margin:0 auto;是设置对象上下间距为0,左右自动;但没有设置对象内文本对象,所以需要在#title1中添加text-align: center;设置文本居中

    点赞 打赏 评论
  • renkai721 2019-09-27 17:25

    添加下面的代码,你在试试

    #main{width:278px;border:1px #dbe2ea solid;margin:200px;
    text-align: center;
    }
    
    点赞 打赏 评论

相关推荐 更多相似问题