html取消居中,HTML中的居中方法

之前我们就总结过很多剧中的方法，但是时间长不用，就会慢慢遗忘，所以我们从头来复习一次，变想边敲代码......

文本居中

height + line-height：两者配合使用，垂直方向居中

text-align：父级的text-align，水平方向居中

注意：text-align：center ；只是将子元素里的内联元素居中

如果不是内联元素就要用到 margin： 0 auto；

写个简单的代码来理解

.word{

width: 100px;

height: 30px;

background: #E5E5E5;

text-align: center;

line-height: 30px;

font-size: 14px;

}

优秀

文字居中

优秀这两个字在div中妥妥居中。

水平居中

水平居中分两种情况

one：定宽块元素水平居中

定宽 + 块元素

来看看具体的代码

.wrap{width:200px;

height:200px;

border:1px solid red;

margin:0 auto;} //宽度必须给值

two：不定宽块元素水平居中

1.改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中

.nav{text-align:center;}

.nav ul{display:inline;}

1111111
2222222

2.父元素浮动left：50%;

同时要设置position:relative(给子元素相对定位一个参考)

子元素相对定位position：relative；left：-50%；

.wrap{position:relative;

left:50%;

float:left;}

.box{position:relative;

left:-50%;}

一个子级盒子

垂直居中

垂直居中也分两种情况

one：块级元素垂直居中，子元素知道具体宽高

设置top:50%，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置margin-top: -2/父宽 px; //为高度的一半

这样这个块元素又相对于自身最上面向上又移动了自身的50%，因此就垂直居中了。

.wrap {

//父元素

}

.wrap .content {

position: absolute;

width: 100px;

heigth: 100px;

top: 50%;

margin-top: -50px; //为高度的一半

}

*** two：子元素不知道具体宽高 ***

这种情况有三种方法

第一种借助table布局；

第二种是借助translate的transform属性:

.wrap {

position: relative;

}

.wrap .content {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

第三种就是用flex布局，非常的简单,代码如下:

.wrap{

display: flex;

flex-direction: column;

justify-content: center;

}

万能居中方法

首先移动子元素高度(宽度)的一半：left：50%;(top:50%;)

再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;)

前提是必须要知道子元素的宽高

.wrap{

width: 200px;

height: 200px;

background-color: lightskyblue;

position: relative;

}

.box{

width: 100px;

height: 100px;

background-color: hotpink;

position: absolute;

left:50%;

margin-left: -50px;

}

一个子级盒子

万能居中

绝对居中

子元素必须比父元素小，子元素宽高也必须要知道

.wrap{

width: 200px;

height: 200px;

background-color: lightskyblue;

position: relative;

}

.box{

width: 100px;

height: 100px;

background-color: hotpink;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

overflow: auto;

}

绝对居中

可能总结的也不太齐全，会慢慢补全。

html取消居中,HTML中的居中方法相关推荐

css td居中_td中字体居中怎么让字体上下居中
html中表格怎样设置文字居中? 可以在CSS:TD{text-对齐:居中}CSS是用HTML编写的,也是HTML的一部分.如果必须完全使用HTML,则只能在每个TD标记中添加align=" ...
CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...
页面中元素居中定位的几种方法
元素居中定位的几种方法元素居中定位的几种方法方法一父元素子元素方法二父元素子元素元素居中定位的几种方法方法一父元素 position: relative; 子元素 position ...
css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析一个元素,它有可能有背景,那我要它的背景居中对齐 ...

html取消居中,HTML中的居中方法

html取消居中,HTML中的居中方法相关推荐

最新文章

热门文章