精华内容
下载资源
问答
  • 行内元素和块级元素居中方法 我也是初学者,希望大家可以一起分享一下学习经验,下面这些居中方法也是我前几天了解到的,很多种居中的方法。 ^ ^ htmlcss ** 行内元素居中 ** 这个方法就是通过text-align:center设置...

    行内元素和块级元素居中方法

    我也是初学者,希望大家可以一起分享一下学习经验,下面这些居中方法也是我前几天了解到的,很多种居中的方法。
    ^ ^

    请添加图片描述html请添加图片描述css

    **

    行内元素居中

    **
    在这里插入图片描述这个方法就是通过text-align:center设置水平居中,line-height=等于行内元素所在块级元素的行高来实现垂直居中。

    **

    块级元素实现水平垂直居中

    **
    1.定位在这里插入图片描述通过定位 子绝父相

    2.定位在这里插入图片描述
    这个我没有接触过 最近学习一下

    3.定位+transform
    在这里插入图片描述这个我用的比较多

    4.定位+margin
    在这里插入图片描述
    这个也是太绝了。。。

    5.给父盒子设置一个padding值在这里插入图片描述
    这个方法可能需要自己根据父盒子和子盒子的宽高计算一下 剩余的空间然后上下分配 左右分配。因为这里是正方形,所以宽高是一样的,但是在宽高不相等的情况下 就需要padding:x,y; 上下 左右 两个值。

    6.flex在这里插入图片描述
    学习过flex布局的小伙伴们应该都懂 我表达的不太好,所以没学习flex的同志们学完之后应该就懂了。。 我就不在这里误导大家了

    7.大概就这些吧 方法应该还有很多 大家可以多多分享 谢谢~~

    展开全文
  • text-align只能对行内元素起作用,对块级元素不起作用 text-align会被后代元素继承 <style> .outer{ width: 200px; height: 200px; background-color: #bfa; text-align:center; } </style>...

    一、行内元素

    前言:觉得之前写的那篇关于水平居中、垂直居中、水平垂直居中的博客写的不太好,所以又整理了一遍。
    之前博客的地址

    1. 水平居中

    方法一:text-algin:center

    父元素设置:text-align:center
    说明:

    1. text-align设置在父元素上,对子元素的居中效果上只能对子元素中的行内元素起作用,对块级元素不起作用。
    2. text-align在对本元素中的文字居中效果上,只对块级元素起作用,对行内元素不起作用,行内元素的宽度由内容决定。
    3. text-align会被后代元素继承
    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	text-align:center;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法二:postion:relative + position:absolute + left:50% + transform:translateX(-50%)

    父元素设置:postion:relative
    子元素设置:postion:absolute + left:50% + transform:translateX(-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    2. 垂直居中

    方法一:display:flex + align-items:center

    父元素设置:display:felx , align-items:center

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    	align-items: center;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法二:postion:relative + position:absolute + top:50% + transform:translateY(-50%)

    父元素设置:postion:relative
    子元素设置:postion:absolute + top:50% + transform:translateY(-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法三:display:table-cell + vertical-align:middle

    父元素设置:display:table-cell , vertical-align:middle

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    	align-items: center;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法四:多个子级行内元素,使用vertical-align

    说明:

    1. vertical-algin是用来设置行内元素垂直对齐的方式
    2. 该属性定义行内元素的基线相对于该元素(设置了vertical-algin的元素)所在行的基线的垂直对齐方式。在表格中,这个属性会设置单元格框中的单元格内容的对齐方式。
    3. 只有元素是inline-block和inline的时候,设置vertical-algin才会起作用
    4. 我们需要更理解vertical-align才能使用好这个属性,以下两个博客可以帮助我们更好的理解
      vertical-align到底怎么用
      关于Vertical-Align你需要知道的事情
    .outer{
    	width: 300px;
    	/*height: 200px;*/
    	background-color: #bfa;
    	display: table-cell;
    	vertical-align: middle;
    }
    .inner{
    	background-color: yellow;
    	vertical-align: middle;
    }
    img{
    	vertical-align: middle;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    	<img src="./img/zhongchou.png" alt="">
    </div>
    

    3. 水平垂直居中

    方法一:text-align:center + (line-height)

    父元素设置:text-align:center , line-height = height
    说明:块级元素只设置line-height而不设置height时,line-height = height

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	text-align: center;
    	line-height: 200px;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法二:dispaly:table-cell + text-align:center + vertical-align:middle

    父元素设置:display:table-cell , text-align:center , vertical-align:middle

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: table-cell;
    	text-align: center;
    	vertical-align: middle;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法三:display:flex + align-items:center + justify-content:center

    父元素设置:display:flex , align-items:center , justify-content:center

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .inner{
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法四:dispaly:flex + margin:auto;

    父元素设置:display:flex
    子元素设置:margin:auto

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    }
    .inner{
    	background-color: yellow;
    	margin: auto;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    方法五:position:relative + position:absolute + left:50% + top:50% + transform:translate(-50%,-50%);

    父元素设置:position:relative
    子元素设置:position:absolute + left:50% + top50%+transform:translate(-50%,-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    	background-color: yellow;
    }
    
    <div class="outer">
    	<span class="inner">
    		行内元素1
    	</span>
    </div>
    

    在这里插入图片描述

    二、块级元素

    1. 水平居中

    方法一:margin: 0 atuo

    子元素设置:margin: 0 atuo

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	margin: 0 auto;
    	background-color: yellow;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    方法二:display:flex + justify-content:center

    父元素设置:dispaly:felx + justify-content:center

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    	justify-content: center;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    方法三:display:flex + margin: 0 auto;

    父元素设置:display:flex
    子元素设置:margin:0 atuo

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display:flex;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	margin: 0 auto;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    方法四:position:relative + position:absolute + left:50%+transform:translateX(-50%)

    父元素设置:position:relative
    子元素设置:position:absolute + left:50% + transform:translate(-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    方法五:position:relative + position:absolute + left:0 + right:0 + margin 0 auto;

    父元素设置:position:relative
    子元素设置:position:absolute + left:0 + right:0 + marign:0 auto

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	left: 0;
    	right: 0;
    	margin: 0 auto;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    2. 垂直居中

    方法一:display:flex + algin-items:center

    父元素设置:display:flex + algin-items:center

    <style>
    	.outer{
    		width: 200px;
    		height: 200px;
    		background-color: #bfa;
    		display: flex;
    		align-items: center;
    	}
    	.inner{
    		width: 100px;
    		height: 100px;
    		background-color: yellow;
    	}
    </style>
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    在这里插入图片描述

    方法二:display:flex + margin:auto 0

    父元素设置:display:flex
    子元素设置:display:flex + margin:auto 0

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	margin: auto 0;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    方法三:position:relative + position:absolute + top:50%+transform:translateY(-50%)

    父元素设置:position:relative
    子元素设置:position:absolute + top:50% + transform:translateY(-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    方法四:position:relative + position:absolute + top:0 + bottom:0 + margin:auto 0

    父元素设置:position:relative
    子元素设置:position:absolute + top:0 + bottom:0 + margin:auto 0

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	margin: auto 0;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    3. 水平垂直居中

    方法一:display:flex + algin-items:center + justify-content

    父元素设置:display:flex + algin-items:center + justify-content

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    方法二:display:flex + margin: auto;

    父元素设置:display:flex
    子元素设置:margin: auto

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	display: flex;
    
    }
    .inner{
    	margin: auto;
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    方法三:position:relative + position:absolute + top:50% + left:50% + transform:translate(-50%,-50%)

    父元素设置:position:relative
    子元素设置:position:absolute + top:50% + left:50% + transform:translate(-50%,-50%)

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    方法四:position:relative + position:absolute + top:0 + bottom:0 + left:0 + right:0 + margin:auto

    父元素设置:position:relative
    子元素设置:position:absolute + top:0 + bottom:0 + left:0 + right:0 + margin:auto

    .outer{
    	width: 200px;
    	height: 200px;
    	background-color: #bfa;
    	position: relative;
    
    }
    .inner{
    	width: 100px;
    	height: 100px;
    	background-color: yellow;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    }
    
    <div class="outer">
    	<div class="inner">
    		块级元素1
    	</div>
    </div>
    

    三、关于display:table-cell和margin的说明

    display:table-cell:

    父元素设置dispaly:table-cell,[text-align:center],[vertical-align:middle],子元素设置dispaly:inline-block。可以实现行内元素,块级元素的水平居中,垂直居中,水平垂直居中;但是这种方式改变了父元素和子元素的性质

    margin:

    1. 当元素脱离默认文档流时(浮动,绝对定位,固定定位),margin失效
    2. 给inline-block和inline设置margin:0 auto时是没用的
    3. 后续会写一篇关于水平方向上的七个属性以及浮动时水平方向上的属性的博客
    展开全文
  • 1、行内元素居中:设置text-align:center; 2、flex布局:设置display:flex;justify-content:center; 垂直居中 父元素高度是单行文本:设置height=line-height; 父元素确定的是多行文本:a:插入table, 然后设置...

    内联元素

    水平居中

    1、行内元素居中:设置text-align:center;

    2、flex布局:设置display:flex;justify-content:center;

    垂直居中

    父元素高度是单行文本:设置height=line-height;

    父元素确定的是多行文本:a:插入table, 然后设置vertical-align:middle;

                b:先设置display:table-cell;然后设置vertical-align:middle;

    块级元素

    水平居中

    1、定宽块级元素:设置左右margin为auto

    2、不定宽块级元素:a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

               b:给该元素设置display:inline;

               c:父元素设置postion:relative;子元素设置position:absolute;left:50%;

    垂直居中

    使用position:absolute

    利用display:table-cell

    css3新特性transform:translate(x,y);

     

    元素的垂直居中有哪些解决方案?

     

    转载于:https://www.cnblogs.com/WaTa/p/5936770.html

    展开全文
  • 内边距产生的问题 ...指定宽度的盒子水平居中块级元素) 想要盒子水平居中,首先盒子的宽度必须是已知的(设置了宽度),然后将盒子左右的 margin 值设置为 auto 即可 如下的几种写法都可以: margin-le...

    内边距产生的问题

    在标准盒子模型中,如果盒子设置了宽高后再给盒子设置 padding 就会改变原来盒子的大小,解决办法:用设置的宽高值减去对应的 padding 值,再将盒子的宽高设置为计算后的值即可

    指定宽度的盒子水平居中(块级元素)

    想要盒子水平居中,首先盒子的宽度必须是已知的(设置了宽度),然后将盒子左右的 margin 值设置为 auto 即可

    如下的几种写法都可以:

    • margin-left: auto; margin-right: auto;
    • margin: auto;
    • margin: 0 auto;

    文本、行内元素、行内块级元素水平居中

    块级元素通过设置 CSS 中的 text-align 样式属性可以块级元素中的文本、行内元素、行内块级元素水平居中;将其属性值设置为 center 即可

    清除元素的默认边距

    一些元素,默认带有padding 或 margin 比如 p、 ul 等标签;所以,为了在开发网站的时候,便于控制,总会清除这个默认的 padding、margin

    通过如下方法可以清除默认的 padding 和 margin

    *{
        margin: 0;
        padding: 0;
    }
    

    CSS 样式属性的属性值为 零 时可以不带单位;另外一些属性值为小数的时候可以将 零省略(0.5 可简写为 .5

    * 的效率不高,实际的开发过程中并不用,所以我们使用并集选择器,罗列出所有需要清除默认边距的标签,哪个标签需要清除加上需要清除的标签即可:

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
        margin: 0;
        padding: 0;
    }
    
    展开全文
  • display: inline-block;(span a li ) height: 25px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  • 一.水平居中   行内元素和块级元素...将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;   3.设置父元素float:left,position:relative,left:50%;子元素
  • 外边距可以让块级元素水平居中,但是必须满足两个条件: 1.盒子必须指定了宽度 2.盒子左右的外边距都设置为auto .header{ width:960px; margin:0 auto; } 常用的写法: margin-left:auto; margin-right:auto;...
  • /*单行文本垂直水平居中*/ .oParent{ width: 200px; height: 100px; text-align: center; border: 1px solid red; } .oParent:after,.oSpan{ display: inline-block; ...
  • 水平居中 行内元素和块级元素不同 ,对于行内元素 ,只需在父元素中设置 text-align=center 即可 ; 对于块级元素有以下几种居中方式 : 1.将元素放置在 table 中,再将 table 的 margin-left 和 margin-right 设置成 ...
  • 行内块级元素块级元素内实现水平垂直居中 1、行内元素 <div> <span>This is a text</span> </div> div{ height: 200px; width: 200px; background-color: lightblue; } (1...
  • 一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性; 2.text-align只对文本有效,对元素无效...水平居中和垂直居中 ...
  • 块级元素如何居中? 第一种 margin:0 auto; 第二种 定位: position: absolute; left:50%; right: 50%; transform: translate(-50%) 第三种 浮动: float: left; margin-left: 50%; margin-right: 5
  • 块级元素中的想要居中行内元素设置: vertical-align: middle 这表示这些行内元素是以它们各自的中间的位置来与其他行内元素对齐的; 若还是没对齐的话,可通过在这些行内元素的父元素中设置line-height 来调节.2....
  •  行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;  对于块级元素有以下几种居中方式:   1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,...
  • 大家都会有一个疑问,为什么文字能够上下左右居中,而块级元素行内元素不能够直接垂直居中? 我们要想将一个文字居中,那么就必须再它的父级元素中去使用text-align:center这个属性就是可以居中,但是没有办法...
  • 行内元素和块级元素居中

    千次阅读 2018-03-05 20:12:07
    1.水平居中:(1)行内元素: 对该行内元素的父元素设置text-align:center(2)块级元素: 对该块级元素设置margin:0 auto(3)弹性盒子中的水平居中: 将某元素定义为弹性盒子:display:flex; 然后在水平方向...
  • 一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,即display:block,一种是行内元素display:inline-block; 块级元素包括div,ul,p,以及所有的h类标签。行内元素又叫内联元素,a,img,...
  • 一、行内元素 1、行内元素的水平居中:给父级元素使用属性text-align:center ... 1、块级元素的水平居中:给子级元素使用属性margin:0 auto 2、行内元素的水平垂直居中,有四种方法: html代码如下: <...
  • 默认的行内元素包括:a( 锚点) ,span(定义文本内区块)img(图片)input(输入框)...默认的块级元素包括:divul(无序列表)ol(有序列表)dl(定义列表)table(表格)form(表单)h1(一级标题))p(段落)pre(预格式化)等。 行内...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,319
精华内容 527
关键字:

行内块级元素居中