div中文本内容居中的方法

最新推荐文章于 2023-07-14 13:32:49 发布
最新推荐文章于 2023-07-14 13:32:49 发布
阅读量8.7k 收藏 17
点赞数 7
分类专栏： 前端基础 文章标签： css html5 html
原文链接：https://www.cnblogs.com/moqiutao/p/4807792.html#articleHeader0
版权

1.行高法

使文字内容的行高与div同高（最常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>行高法</title>
		<style type="text/css">
			div
			{
				width: 100px;
				height: 40px;
				background-color: #333;
			}
			p
			{
				line-height: 40px;
				background-color: #baf;
			}
		</style>
	</head>
	<body>
		<div id="div-1">
			<p>西瓜小羽毛</p>
		</div>
	</body>
</html>

2.内边距法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>内边距法</title>
		<style type="text/css">
			div
			{
				width: 100px;
				height: 40px;
				background-color: #333;
			}
			p
			{
				padding: 10px 0;
				background-color: #baf;
			}
		</style>
	</head>
	<body>
		<div id="div-1">
			<p>西瓜小羽毛</p>
		</div>
	</body>
</html>

3.模拟表格法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>模拟表格法</title>
		<style type="text/css">
			.wrapper
			{
				display: table;
				background-color: #BBAAFF;
			}
			.cell
			{
				display: table-cell;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="cell">
				<p>西瓜小羽毛</p>
			</div>
		</div>
	</body>
</html>

4.translation

在不知道div大小的情况下很好用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>transform属性</title>
		<style type="text/css">
			.box
			{
				width: 100px;
				height: 60px;
				background-color: #bfa;
			}
			p
			{
				position: relative;
				top: 50%;
				background-color: #BBAAFF;
				transform: translateY(-50%);
				/*
				 * translate参数百分比是移动自身长度的百分比
				 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>西瓜小羽毛</p>
		</div>
	</body>
</html>

5.box布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>box布局</title>
		<style type="text/css">
			.center 
			{
				width: 300px;
				height: 200px;
				padding: 10px;
				border: 1px solid #ccc;
				background:#000;
				color:#fff;
				margin: 20px auto;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<div class="txt">
				<p>西瓜小羽毛</p>
				<p>西瓜小羽毛</p>
				<p>西瓜小羽毛</p>
			</div>
		</div>
	</body>
</html>

6.flex布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>flex布局</title>
			<style type="text/css">
				.center 
				{
					width: 300px;
					height: 200px;
					padding: 10px;
					border: 1px solid #ccc;
					background:#000;
					color:#fff;
					margin: 20px auto;
					display: -webkit-flex;
					align-items: center;
					justify-content:center;
								
				}
			</style>
	</head>
	<body>
		<div class="center">
			<div class="txt">
				<p>西瓜小羽毛</p>
				<p>西瓜小羽毛</p>
				<p>西瓜小羽毛</p>
			</div>
		</div>
	</body>
</html>
西瓜小羽毛
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
控制DIV中文字绝对居中的简单方法
12-30
搞了这么久，以前不知道怎么弄，老是用表格，今天终于搞清楚了。。。 水平居中：<div align=center>Content</div> ...不过对于垂直居中，却要设置固定高度，有点不方便，暂时想不到什么方法来解决自适应高度。
html中div内容居中的方法
热门推荐
火星男孩的分享空间
03-27 7万+
方法1：table-celldiv中的内容居中：不改变盒子尺寸。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: red; widt
CSS总结div中的内容垂直居中的五种方法
weixin_34342992的博客
09-14 3104
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它...
CSS总结div中的内容垂直居中的六种方法
最新发布
susunjia的博客
07-14 4859
CSS总结div中的内容垂直居中的六种方法
css实现文本内容水平居中的4个方法
爱分享
03-31 5954
以上是几种实现文本垂直居中和水平居中的方式，每种方式都有其适用的场景和优缺点。其中，利用margin:auto和position:absolute的方式需要知道元素的宽度和高度，适用于元素宽高固定的情况。利用table的方式比较适用于多行文本的垂直居中。可以给父元素设置display: flex，并给子元素设置align-items和justify-content属性来实现文本的水平垂直居中。利用position: absolute和top、bottom、left、right属性来实现文本的水平垂直居中。
div层中内容的居中
鄢潆
09-09 2478
有时候，为了网页设计的美观，需要把div+css设计的页面里的某些div层里的文字垂直居中，包括多行文字以及单行文字；方法有不少，但真正能实现而代码又简洁的介绍不多，flymorn就为大家介绍几种适用的div文字垂直居中的方法。      首先要知道css里vertical-align无效，W3C官方对vertical-align做了下面的解释： “ This property affects
div内文字水平居中+垂直居中
11-16 2066
div内文字水平居中+垂直居中
div中多行文字垂直居中
07-21
在网页设计中，让多行文字在`div`元素中垂直居中是一项常见的需求，尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...
PeterChen1997#Frontend-Repo#2-div水平垂直居中方法1
07-25
div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现
HTML 如何让div内字体上下左右居中
qiudechao1的博客
11-05 4万+
div中的文字水平居中：text-align:center；即可。 div中的文字垂直居中：line-height:值。值等于div的高度。 text-indent:2em;//首航缩进2字符 你们假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中： <div style="width:1000px; height:100px;text-ali...
如何实现div中的文字垂直水平居中
weixin_43322018的博客
06-27 1万+
文字居中 文字水平垂直居中可以使用： //方法一 //设置line-height和div的height实现垂直居中，text-align实现水平居中 height: 50px; line-height: 50px； text-align: center; //方法二 //设置文字外的div的display为flex，设置主轴和交叉轴的值 //也可以设置其他的值让文字出现在想放的地方 display: flex; justify-content: center; align-i
div中的文字居中
oldseasoul的专栏
08-01 7345
居中的文字.label_middel{ height:34px; overflow:hidden; line-height:34px;TEXT-ALIGN: center;}关键在于  line-height:34px; height:34px;即line-height==height不过这只适合于单行文本 对于多行文本：   居中的文字居中的文字居中的文字居中的文字
css3 - 让文字位于div元素正中央
erdouzhang
05-04 2万+
使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用-moz-box-pack、-moz-box-align的形式；在Safari、Chrom浏览器中，需要使用-webkit-box-pack、-webkit-box-align的形式。在使用CSS 1.0或CSS 2.0的时候，在div
一个div中文字居中的方法
jievachange
07-19 2413
当在div中布局时，只有text-align:center这水平居中，可是垂直居中则只有table表中才是有，所以这时要居中的方法就是： 设置div的高度，在设置div的属性line-height等于div的高度就OK 当然还有设设置padding,margin值的，但都不太理想
让一个div居于屏幕正中间,让其中的文字也相对于div居于正中间
业余前端的职业经历
12-01 2635
1.面试的时候 会碰见这样的问题 如何让一个宽高200px的div居于屏幕正中间 上下都居中的意思 看到这样的题目 很开心 直接就开些写了 style{ div:{ width:200px; height:200px; border:1px solid #f00; ...
如何让div中的文字居中
前端学习笔记
07-24 2398
首先定义一个类名为box的div容器，直接在其内部添加文字 以下代码适用单行文字在容器中居中对齐 .box{ height:50px; width:50px; text-align:center;  //设置文字水平居中 line-height:50px;  //设置垂直方向居中 overflow:hidden;  //防止内容超出容器，或者产生自动换行，这样就达不到垂直居中的效果
css笔记：如何让一个div居于页面正中间
weixin_33885253的博客
04-15 4293
如何让一个div居于页面中间，我今天说的是让一个div水平居中同时垂直居中，而不是简单的top：50%，left：50%。当然，我们就按一开始的思路写一下：top，left属性都设为50%，看一下效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
CSS 中Div文字居中
xufaxi的专栏
09-30 372
分一下两种情况： 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持&lt; img &gt;等的居中,之所以要用 overflow: hidden ,是因为当用...
div中文本垂直居中
05-30
可以使用CSS样式将div中的文本内容垂直居中对齐，具体方法如下： 1. 设置div元素的display属性为flex，将其变为flex容器： ```css div { display: flex; align-items: center; /* 垂直居中对齐 */ } ``` 2. 将文本内容放置在div元素内部，即可实现文本内容垂直居中对齐： ```html <div> 文本内容 </div> ``` 注意：以上方法仅适用于已知高度的容器，如果容器高度未知，可以考虑使用JavaScript动态计算高度来实现垂直居中对齐。同时，如果div元素包含多个文本元素或其他元素，可以使用flexbox布局的子元素垂直对齐方式来控制每个元素的对齐方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值