老师，能说一下text-align:center; 和margin:0px auto这两个是啥么

，我试了很久了，还有下面的对不对~~

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0;padding:0;}

.quanbu{border:1px dashed gray;overflow:hidden;width:750px;padding:10px;margin:0px auto}

.div1{border:1px solid gray;float:left;margin:0px 10px 0px 0px;}

.div2{border:1px solid gray;float:left;margin:0px 10px 0px 0px;}

.div3{border:1px solid gray;float:left;margin:0px 0px;}

.div4{border:1px solid gray;float:left;clear:left;margin:10px 10px 0px 0px;}

.div5{border:1px solid gray;float:left;margin:10px 10px 0px 0px;}

.div6{border:1px solid gray;float:left;margin:10px 0px 0px 0px;}

p{text-align:center}

</style>

</head>

<body>

<p>欢迎来到慕课网学习新知识！</p>

</div>

<p>欢迎来到慕课网学习新知识！</p>

</div>

<p>欢迎来到慕课网学习新知识！</p>

</div>

<p>欢迎来到慕课网学习新知识！</p>

</div>

<p>欢迎来到慕课网学习新知识！</p>

</div>

<p>欢迎来到慕课网学习新知识！</p>

</div>

</body>

</html>

哈哈哈哈哈哈哈哈哦 2019-02-23

源自：float浮动 3-4 编程练习

收起

3回答

山河远阔ZZ 2019-02-25 09:46:47

同学你好，想要元素垂直居中，单独的margin：auto 0；是不可以的哦。需要借助position定位。

绝对定位和0，例如：

可以试一下哦。

收起回答

山河远阔ZZ 2019-02-24 10:22:10

同学你好

1、text-align：center是指文本相对于元素，居中显示，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#aa{
width: 200px;
height: 100px;
border:1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div id="aa">我是用来做测试的</div>
</body>
</html>

效果图：

2、margin：0px auto；可以用来做整体元素居中显示，0表示上下边距为0px，auto表示左右自适应（即居中），例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#aa{
width: 200px;
height: 100px;
border:1px solid red;
text-align: center;
margin:0 auto;
}
</style>
</head>
<body>
<div id="aa">我是用来做测试的</div>
</body>
</html>

效果图：

可以测试一下哦，如果帮助到了你，欢迎采纳。

祝学习愉快！

收起回答

提问者哈哈哈哈哈哈哈哈哦 #1

老师你好，如果是margin auto 0px; 这就表示上下垂直居中了吗

2019-02-24 10:44:55

Sherlock_bourne 2019-02-23 22:13:37

同学，你好！顾名思义，前者属于对文字设置居中，比如在一个背景图中，插入一首诗，则可用text-align:center使文本居中。但如果又有文本又有文字，如何让他们一起居中呢？那就得用后者。margin: 0 auto。0表示上下边距为0px，auto表示左右自动（即居中）。具体到本节练习中的用法，老师把代码发给你，你运行看看。如果帮助到你，请采纳！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>慕课网</title>
    <style>
        *{margin:0;padding:0;font-family:"微软雅黑";}
        .content{line-height:24px;width:810px;margin:10px auto;border:1px solid gray;padding:10px;}
        .img01{float:left;padding-right:10px;}
        .img02{float:right;padding-left:10px;}
    </style>
</head>    
<body>
    <div class="content">
        <div class="div1">
        <img src="http://img1.sycdn.imooc.com/climg//59c8742e0001bc9607120172.jpg" alt="" class="img01">
        慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。<br/><br/>
        慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。<br/><br/>
        4月2日，国内首个IT技能学习类应用——慕课网3.1.0版本在应用宝首发。据了解，在此次上线的版本中，慕课网新增了课程历史记录、相关课程推荐等四大功能，为用户营造更加丰富的移动端IT学习体验。<br/><br/>
        </div>
        <div class="div2">
        <img src="http://img1.sycdn.imooc.com/climg//59c874560001779307120172.jpg" alt="" class="img02">
        老师来自于各大IT公司重要技术岗位，拥有丰富的实战经验。语言平实、通俗易懂，更接地气，传授最有价值的经验之谈。课程内容注重实用性，不仅让学员通过学习能够做出产品，而且学习过程中掌握的方法技巧在实际工作中用得上，能够切实帮助学员提升工作技能。<br/><br/>
        慕课网的绝大多数课程都经过了专业的后期制作，为课程内容匹配了个性化的视觉效果，帮助学员更好地理解课程内容，增加学习的乐趣。
        </div>
    </div>
</body>
</html>