CSS 布局 -- 水平 & 垂直对齐

最新推荐文章于 2024-04-03 18:02:23 发布
最新推荐文章于 2024-04-03 18:02:23 发布
阅读量342 收藏
点赞数
分类专栏： CSS 文章标签： CSS 布局 水平对齐 垂直对齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80418141
版权

元素居中对齐

   要水平居中对齐一个元素，可以使用 margin:auto;

   设置到元素的宽度将防止它溢出到容器的边缘；

   元素通过指定宽度，并将两边的空外边距平均分配：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				margin:auto;
				width:60%;
				border:3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<h2>元素居中对齐</h2>
		<p>水平居中块级元素 (如 div), 可以使用 marig：auto;</p>
		
		<div class="center">
			<p><b>注意：</b>使用 margin：auto 无法兼容 IE8， 除非 !DOCTYPE 已经声明。</p>
		</div>

	</body>
</html>

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

 

 

 

文本居中对齐

   如果仅仅是为了文本在元素内居中对齐，可以使用 text-align：center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				text-align:center;
				border:3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<h2>文本居中对齐</h2>
		
		<div class="center">
			<p>文本居中对齐</p>
		</div>

	</body>
</html>

图片居中对齐

   要让图片居中对齐，可以使用 margin:auto;并将他放到块元素中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			img {
				display:block;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<h2>图片居中对齐</h2>
		<p>要让图片居中对齐，可以使用 margin：auto，并将它放到块元素中</p>
		
		
		<img src="paris.jpg" alt="Paris" style="width:40%">

	</body>
</html>

左右对齐--使用定位方式

   我们可以使用 positon：absolute;属性来对齐元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.right {
				position:absolute;
				right:0px;
				width:300px;
				border:3px solid #73AD21;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<h2>右对齐</h2>
		<p>以下实例演示了如何使用 position 来实现右对齐:</p>

		<div class="right">
		  <p>如约智惠 -- 你的生活助手！</p>
		</div>

	</body>
</html>

   注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

   提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

  当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative;
    width: 100%;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="container">
	<div class="right">
	<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
	</div>
</div>
</body>
</html>

左右对齐 -- 使用 float 方式

   我们也可以使用 float 属性来对齐元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p>

<div class="right">
  <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
</div>

</body>
</html>

   我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			div {
				border:3px solid #4CAF50;
				padding:5px;
			}
			
			.img1 {
				float:right;
			}
			
			.clearfix {
				overflow:auto;
			}
			
			.img2 {
				float:right;
			}
		</style>
	</head>
	<body>
		
		<p>以下实例图在父元素中移除，很不美观：</p>

		<div>
		<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
		如约智惠 - 你的生活助手！！！</div>

		<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>

		<div class="clearfix">
		<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
		如约智惠 - 你的生活助手！！！！！</div>

	</body>
</html>

    当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			 
			.right {
				float: right;
				width: 300px;
				background-color: #b0e0e6;
			}
		</style>
	</head>
	<body>
		
		<div class="right">
			<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
		</div>

	</body>
</html>

 

垂直居中对齐--使用padding

 

   CSS中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				padding:70px 0;
				border:3px solid green;
			}
		</style>
	</head>
	<body>
		<h2>垂直居中</h2>
		<p>以上实例，我们使用padding属性实现元素的垂直居中：</p>
		
		<div class="center">
			<p>我是垂直居中的。</p>
		</div>

	</body>
</html>

   如果要水平和垂直都居中，可以使用 padding 和 text-align: center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				padding:70px 0;
				border:3px solid green;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h2>Centering</h2>
		<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
		
		<div class="center">
			<p>我是水平和垂直都居中的。</p>
		</div>

	</body>
</html>

 

垂直居中--使用 line-height

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

 

垂直居中-- 使用 position 和 transform

 

    除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

<p>注意: IE8 及更早版本不支持 transform 属性。</p>

</body>
</html>

参考:

https://www.yuque.com/docs/share/0b7aa087-65cc-437b-b58d-92e0d92238e2

冷月醉雪
关注
专栏目录
CSS如何设置高度为屏幕高度_掌握 CSS 精髓：布局
weixin_39620279的博客
11-21 1251
CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS ...
HTML/CSS -- 利用table进行布局
wust_cyl的博客
12-28 1339
cssTable布局：table布局 布局1：高度固定，左边宽度固定，右边自适应 &amp;lt;style&amp;gt; .content-wrap { display: table; height: 100px; width: 100%; } .content-left ...
div内容垂直居中对齐
SomeDay的专栏
03-25 7508
css垂直居中属性设置vertical-align: middle对div不起作用，例如： DIV垂直居中对齐 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body {text-align: center; vertical-align: middle;} .outer {
CSS垂直分布
qq_57633481的博客
11-24 408
CSS垂直分布
Css实现元素的垂直居中
乱世刀疤
10-09 5369
在Css中尽管有vertical-align这个特性,但并未能解决所有的垂直居中问题,比如位置高度元素的垂直居中。下面列出一些实现元素居中的方法:使用table实现元素的居中:实现元素垂直居中的最简单方式应该就是利用table中设置单元格的 vertical-align:middle 了：css代码如下：.data-sheet td{ vertical-align:middle;}
CSS布局-水平&垂直对齐
qq_40407724的博客
08-25 166
CSS布局-水平&amp;垂直对齐 水平居中 元素居中 设置width属性（不能为100%），设置margin:auto; 文本居中 使用属性text-align:center; 图片居中 将图片放入块元素中，同元素居中 垂直居中 使用padding：100px 0； 设置line-height 属性值和 height 属性值相等让元素居中 使用了 positionin...
html让文本框左剧中对齐_HTML &amp; CSS页面布局之定位
weixin_39856055的博客
10-25 1310
我们在编写网页代码时，首先应该做的就是设计好页面的布局形式，然后再往里面填充内容。网页布局的好与坏，直接决定了网页最终的展示效果。这里总结一下 WEB前端CSS部分的定位问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。文档流文档流就是HTML文档内所有元素按照一定规律排列并显示的形式。CSS文档流大致可以分为3种：标准流，浮动流，...
基于HTML&amp;CSS的练题网页
06-29
Flexbox允许在容器内水平或垂直排列子元素，而Grid则可以创建多列多行的网格结构。例如，使用Flexbox实现居中对齐的代码如下： ```css .container { display: flex; justify-content: center; align-items: ...
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中
ruyu00的博客
11-22 1978
一、CSS操作规范 1、CSS书写技巧 （1）最外层是一个&amp;lt;div id="bigDiv"&amp;gt;，将所有元素都包进去 （2）去除&amp;lt;body&amp;gt;的外边距（body{margin: 0px;}） ，因为不同浏览器对body边距的处理有差别 （3）去除所有元素的内外边距（*{padding: 0px; margin: 0px;}），并让最大的盒子水平居中（#bigDiv{mar...
CSS布局——水平垂直居中、等分布局，web前端开发师学习
最新发布
2401_84002730的博客
04-03 1010
等分布局就是将一行分为多列，每一列的宽度是相同的。即用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景。中间的部分是三栏中高度最高的部分。实现圣杯布局效果也可以采用flex布局，就是一个大盒子包含三个子盒子，左右两个盒子固定宽高，中间盒子设置flex：1（占据大盒子剩余空间）。本行分为四列，所以宽度为25%，padding-right是设置一个元素的右填充在此填充了10px，即每个子元素之间的空隙。5，两栏布局，左边固定，右边自适应，左右不重叠。
css元素的水平与垂直布局
weixin_42444219的博客
06-13 705
水平布局 一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-right,margin-right共同决定。 一个元素在父元素中时，必须满足以上七个属性值的和等于其父元素内容区的width。 若等式未成立，则会把这种情况称为过度约束，此时等式会自动进行调整，调整的情况为： 如果七个值中没有为auto的，浏览器自动调整margin-right来配平等式。 七个值中width，ma
html div垂直分布,html – css div之间的垂直差距
weixin_28730353的博客
06-23 388
我知道这是一个常见的问题,但似乎找不到有效的解决方案.我有一个这样的设置：Titlesome other text.content-area-top {height: 12px;width: 581px;background-image: url(images/content-top.jpg);}.content-area {margin-left: 10px;margin-right: 10px...
CSS中实现元素水平居中、垂直居中的6个方法（详解）
热门推荐
xtcbql的博客
09-30 3万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 4518
如何将div垂直水平居中？7个小妙招
CSS小技巧之position和transform
chaocainiao的博客
09-13 633
position 属性指定了元素的定位类型,CSS中常用的定位属性.元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 transform是css3中的一个特征，可以实现元素的缩放，位移，变形。 属性值： scale：缩放 translate 位移 rotate 旋转 skew 倾斜 此次使用position和transform实现一个旋转的太极图案.
CSS 垂直分布
Full_Career的博客
07-19 2944
http://www.cnblogs.com/dojo-lzz/p/4419596.html 这里面我用的是子元素的display:inline-block;vertical-alinge:middle;line-height:xxpx;来解决的问题
css居中总结
最自由的笑的博客
08-04 177
行内元素的水平居中： 给父元素设置 text-align：center；但对浮动元素，绝对定位元素无效 确定宽度的块级元素的水平居中： 设置margin:0 auto; 不确定宽度的块级元素的水平居中 -将块级元素display设置为inline，然后使用text-align：center -给父元素设置float,position:relative,left:50%,子元素设置position:
float垂直不对齐的问题
weilikk的博客
12-26 1234
今天修改界面，要给一个div添加一个按钮，在右侧。html代码如下 &amp;lt;div class="myPanel"&amp;gt; &amp;lt;span&amp;gt;我的面板&amp;lt;/span&amp;gt; &amp;lt;input name="input" type="button" class="arrowUp" value=" &qu
CSS居中布局完全指南：水平&amp;垂直居中方法解析
"这篇文章主要汇总了CSS中实现元素垂直和水平居中的多种方法，包括文本、单个块级元素、多个水平或垂直排列的元素以及同时实现垂直水平居中的技术。" 在CSS布局中，居中对齐是常见的需求，这篇文章详细介绍了多种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值