美文网首页
盒子的文本居中的技巧

盒子的文本居中的技巧

作者: Older00 | 来源:发表于2018-07-29 21:29 被阅读0次

margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子居中了:

margin-left: auto;

margin-right: auto;

简写为

margin:0 auto;

注意:

1) 使用margin:0 auto; 的盒子,必须有width,有明确的width

2) 只有标准流的盒子,才能使用margin:0 auto; 居中。

也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;

3) margin:0 auto;是在居中盒子,不是居中文本。

文本的居中,要使用

text-align:center;

margin:0 auto;  → 让这个div自己在大容器中居中。

text-align: center;  → 让这个div内部的文本居中。

普及一下知识,text-align还有

text-align:left;    没啥用,因为默认居左

text-align:right;    文本居右

安卓开发

安卓开发技术交流,问题求助实战案例分享

ios开发

安卓开发技术交流,问题求助实战案例分享

前端开发

安卓开发技术交流,问题求助实战案例分享

HTML5前端开发

一线资深前端开发工程师亲情打造!助你完成普通程序员到优秀工程师的华丽升级

使用HTML5和CSS3技术轻松实现设备自适应展示

清晰明了的语义化代码结构,更高的可读性,更利于页面维护

Bootstrap前端开发

一线资深前端开发工程师亲情打造!助你完成普通程序员到优秀工程师的华丽升级

使用HTML5和CSS3技术轻松实现设备自适应展示

清晰明了的语义化代码结构,更高的可读性,更利于页面维护

最新课程

加入学习

加入学习

加入学习

加入学习

加入学习

加入学习

加入学习

加入学习

麦子学院移动APP下载

全新UI交互,与新网站数据同步,更加丰富的课程,开启精彩无限,语音搜索磕碜,喊出你想要的课程,一件收藏,方便自己重复学习,离线下载课程,在哪里都能开!

iPhone版Android版

联系小麦

                        麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台,目前已有30万注册用户,10万以上APP下载量,5000小时视频内容。 我们从不说空话,专注于IT在线教育,脱离传统教育的束缚,让你走哪学哪,想学就学。逗比的老师,贴心的助教,在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度!

地址:成都市高新区天府软件园D5-11

联系电话:028-86567913

邮箱:hr@maiziedu.com

Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4

$(function(){

/*导航跳转效果插件*/

$('.nav').singlePageNav({

offset:70

});

/*小屏幕导航点击关闭菜单*/

$('.navbar-collapse a').click(function(){

$('.navbar-collapse').collapse('hide');

});

new WOW().init();

})

相关文章

  • 盒子的文本居中的技巧

    margin的值可以为auto,表示自动。当left、right两个方向,都是auto的时候,盒子居中了: mar...

  • 前端学习第三天- margin和浮动

    想让盒子(div)居中 1 让盒子中的内容居中--文本或者行内,行内块元素水平居中: 让盒子本身水平居中,而不是内...

  • PPT(1)

    技巧1 文本框居中的方法,首先视图中选择显示参考线,然后双击文本框,选择对齐的方式:水平居中。 技巧2:配图一般把...

  • 笔记

    导航栏案列: 行高等于盒子的高度 可以让单行文本垂直居中,小于盒子高度文字偏上,大于盒子高度文字偏下; 行内元素,...

  • css技巧

    技巧一 多行文本水平垂直居中,少于一行文本居中,多余一行文本居左(试用于对话提示框) box和center的作用是...

  • CSS基础第五天

    1、定位的盒子居中显示 ★:margin:0 auto; 只能让标准流的盒子居中对齐。★定位的盒子居中:先左右走...

  • 文本垂直居中的方式

    前言:垂直居中是布局里常常会遇到的需求,其中文本垂直居中因为文本高度的不确定性更需要技巧一些。抛开目前讨论度很高的...

  • 前端中的居中问题

    一、文本居中 文本水平居中: text-align:center 文本垂直居中:(1)设置line-height=...

  • 【前端】CSS : 对齐、居中

    介绍 文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍 文本 文本水平居中 文本...

  • 对css居中的一点思考

    在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到。居中的技巧有...

网友评论

      本文标题:盒子的文本居中的技巧

      本文链接:https://www.haomeiwen.com/subject/isrimftx.html