div块内的CSS中心文本(水平和垂直)
我将div
设置为display:block
( height
和width
90px
),并且里面有一些文本。
我需要文本在垂直和水平方向上居中对齐。
我尝试了text-align:center
,但是它没有做水平部分,所以我尝试了vertical-align:middle
,但是没有用。
有任何想法吗?
#1楼
调整线高以获得垂直对齐。
line-height: 90px;
#2楼
截至2014年的常用技术:
方法1-
transform
translateX
/translateY
:此处示例 / 全屏示例
在受支持的浏览器 (大多数)中,您可以将
top: 50%
/left: 50%
与translateX(-50%) translateY(-50%)
以动态地垂直/水平居中该元素。.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
方法2-Flexbox方法:
此处示例 / 全屏示例
在支持的浏览器中 ,将目标元素的
display
设置为flex
并使用align-items: center
进行垂直居中,justify-content: center
进行水平居中。 只是不要忘记为其他浏览器支持添加供应商前缀( 请参阅示例 )。html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }
方法3-
table-cell
/vertical-align: middle
:此处示例 / 全屏示例
在某些情况下,您需要确保
html
/body
元素的高度设置为100%
。对于垂直对齐,将父元素的
width
/height
为100%
然后添加display: table
。 然后,对于子元素,将display
更改为table-cell
并添加vertical-align: middle
。对于水平居中,可以添加
text-align: center
以使文本和任何其他inline
子元素居中。 另外,您可以使用margin: 0 auto
假设元素为block
级。html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }
方法4-绝对从顶部移至顶部
50%
:此处示例 / 全屏示例
这种方法假定文本的高度已知-在这种情况下为
18px
。 相对于父元素,绝对将元素从顶部定位50%
。 使用负margin-top
限值负值,该值是元素已知高度的一半,在这种情况下为-9px
。html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }
方法5-
line-height
方法(最不灵活-不建议):这里的例子
在某些情况下,父元素将具有固定的高度。 对于垂直居中,您要做的就是在子元素上将
line-height
值设置为等于父元素的固定高度。尽管此解决方案在某些情况下可以使用,但值得注意的是,当有多行文本( 例如this)时,该解决方案将无法使用。
.parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
方法4和5并不是最可靠的。 选择前三个之一。
#3楼
# Parent
{display:table;
}# Child
{display: table-cell;width: 100%; // As large as its parent to center the text horizontallytext-align: center;vertical-align: middle; // Vertically align this element on its parent
}
#4楼
我始终对容器使用以下CSS,以使其内容水平和垂直居中。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
在此处查看其运行情况: https : //jsfiddle.net/yp1gusn7/
#5楼
使用flexbox / CSS:
<div class="box"><p>അ</p>
</div>
CSS:
.box{display: flex;justify-content: center;align-items: center;
}
摘自快速提示:垂直和水平居中对齐元素的最简单方法
#6楼
<div class="small-container"><span>Text centered</span>
</div><style>
.small-container {width:250px;height:250px;border:1px green solid;text-align:center;position: absolute;top: 50%;left: 50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
}
.small-container span{position: absolute;top: 50%;left: 50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
}
</style>
#7楼
这应该是正确的答案。 最干净,最简单:
.element {position: relative;top: 50%;transform: translateY(-50%);
}
#8楼
这对我有用(测试确定!):
HTML:
<div class="mydiv"><p>Item to be centered!</p>
</div>
CSS:
.mydiv {height: 100%; /* Or other */position: relative;
}.mydiv p {margin: 0;position: absolute;top: 50%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%); /* To compensate own width and height */
}
您可以选择50%以外的其他值。 例如,以25%为中心,以25%的父母为中心。
#9楼
您可以为此尝试非常简单的代码:
display: flex;align-items: center;justify-content: center;
.box{ height: 90px; width: 90px; background: green; display: flex; align-items: center; justify-content: center; }
<div class="box"> Lorem </div>
Codepen链接: http ://codepen.io/santoshkhalse/pen/xRmZwr
#10楼
<!DOCTYPE html>
<html><head><style>.maindiv {height: 450px;background: #f8f8f8;display: -webkit-flex;align-items: center;justify-content: center;}p {font-size: 24px;}</style></head><body><div class="maindiv"><h1>Title</h1></div></body>
</html>
#11楼
您可以尝试以下方法:
如果您只有一个单词或一个单行句子,那么以下代码可以解决问题。
在div标签内添加文本,并为其指定ID。 为该ID定义以下属性。
id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }
注意:确保line-height属性与分隔的高度相同。
图片
但是,如果内容不止一个单词或一行,那么这将不起作用。 此外,有时您无法指定像素大小(以px或%为单位)(当分隔的确很小且您希望内容恰好在中间时)。
要解决此问题,我们可以尝试以下属性组合。
id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }
图片
这三行代码将内容精确地设置在一个分区的中间(与显示大小无关)。 “对齐项目:居中”有助于垂直居中,而“调整内容:居中”将使其居中居中。
注意: Flex不适用于所有浏览器。 确保为其他浏览器支持添加适当的供应商前缀。
#12楼
套用样式:
position: absolute;
top: 50%;
left: 0;
right: 0;
您的文本将居中,而不考虑其长度。
#13楼
方法1
div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }
<div> Hello, World!! </div>
方法2
div { height: 200px; line-height: 200px; text-align: center; border: 2px dashed #f69c55; } span { display: inline-block; vertical-align: middle; line-height: normal; }
<div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span> </div>
方法3
div { display: table; height: 100px; width: 100%; text-align: center; border: 2px dashed #f69c55; } span { display: table-cell; vertical-align: middle; }
<div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div>
#14楼
将此CSS类提供给目标<div>:
.centered { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; background: red; /* Not necessary just to see the result clearly */ }
<div class="centered">This text is centered horizontally and vertically</div>
#15楼
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center} .cell {display: table-cell} .cell-middle {vertical-align: middle}
<div class="cell-row"> <div class="cell cell-middle">Center</div> </div>
#16楼
这为我工作:
.center-stuff{text-align: center;vertical-align: middle;line-height: 230px; /* This should be the div height */
}
#17楼
div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }
<div> Hello, World!! </div>
#18楼
您可以在父 div
处使用flex
属性,并将margin:auto
属性添加到子项:
.parent {display: flex;/* You can change this to `row` if you want the items side by side instead of stacked */flex-direction: column;
}/* Change the `p` tag to what your items child items are */
.parent p {margin: auto;
}
您可以在此处查看flex
更多选项: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
#19楼
请尝试以下示例。 我为每个类别添加了示例:水平和垂直
<!DOCTYPE html>
<html><head><style>#horizontal{text-align: center;}#vertical{position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}</style></head><body><div id ="horizontal">Center horizontal text</div><div id ="vertical">Center vertical text</div></body>
</html>
#20楼
<!DOCTYPE html>
<html><head></head><body><div style ="text-align: center;">Center horizontal text</div><div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div></body>
</html>
#21楼
添加行display: table-cell;
到该div的CSS内容。
只有表格单元格支持vertical-align: middle;
,但您可以将[table-cell]定义赋予div ...
一个实时示例在这里: http : //jsfiddle.net/tH2cc/
div{height: 90px;width: 90px;text-align: center;border: 1px solid silver;display: table-cell; // This says treat this element like a table cellvertical-align:middle; // Now we can center vertically like in a TD
}
#22楼
如果是一行文本和/或图像,则很容易做到。 只需使用:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
而已。 如果可以是多行,那么它会稍微复杂一些。 但是在http://pmob.co.uk/上有解决方案。 查找“垂直对齐”。
由于它们往往是黑客或添加复杂的div ...我通常使用带有单个单元格的表来实现它...使其尽可能简单。
2016年/ 2017年更新:
它通常可以通过transform
来完成,即使在较旧的浏览器(例如Internet Explorer 10和Internet Explorer 11)中也可以很好地工作。它可以支持多行文本:
position: relative;
top: 50%;
transform: translateY(-50%);
示例: https : //jsfiddle.net/wb8u02kL/1/
收缩包装宽度:
上面的解决方案为内容区域使用了固定的宽度。 要使用收缩包装的宽度,请使用
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
示例: https : //jsfiddle.net/wb8u02kL/2/
我尝试了flexbox,但是它没有得到广泛的支持,因为它在某些旧版本的Internet Explorer(例如Internet Explorer 10)中会损坏。
#23楼
对我来说,这是最好的解决方案:
HTML:
<div id="outer"> <img src="logo.png"></div>
CSS:
#outer {position: fixed;top: 50%;left: 50%;/* bring your own prefixes */transform: translate(-50%, -50%);
}
div块内的CSS中心文本(水平和垂直)相关推荐
- html css实现文本水平垂直居中显示
这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法. 一.利用行高(line-height)和verti ...
- css元素的水平与垂直布局
水平布局 一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-righ ...
- 微信小程序中一个div块内进行内容滚动
使用scroll-view标签
- 如何在更大的div内使图像中心(垂直和水平)居中[重复]
这个问题已经在这里有了答案 : div块内的CSS中心文本(水平和垂直) (23个答案) Flexbox:水平和垂直居中 (10个答案) 如何在div内垂直对齐图像 (35个答案) 如何在div中垂直 ...
- HTML(div块浮动)
HTML(div块浮动) 之前我们知道了一个div块只能自己独占一行,但是通过浮动设置我们可以使多个不同的块处于同一行 浮动设置 浮动案例实现 一.浮动设置 div块标签的css样式实现是通过选择器实 ...
- html div.menus,性感的CSS菜单(Menus)
当你需要一个简单易用的导航菜单得时候.CSS Menu是个不错的选择.相对于Flash/Javascript,他们小巧轻便,而且方便使用.当然,他们也能做出很多很漂亮的效果. Css Menu Exa ...
- 【HTML+CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- html中div文字垂直居中显示,CSS文本和div垂直居中方法总结
在样式布局中,我们经常碰到需要将元素居中.通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和rig ...
最新文章
- 设置Eclipse的workspace路径
- 开源Linux 3.3内核首次融合Android代码
- javafx 使用_何时使用JavaFX代替HTML
- 禁用导航栏的右滑返回实现全屏手势返回
- HTML+CSS+JS实现 ❤️发光糖果泡泡动画特效❤️
- asp.net中URL参数加密解密过程
- php 8.0 jit,PHP 8.0 正式版发布,性能提升 10%
- java 如何查看jdk版本位数
- [MAC] 6 个好用小技巧
- 腾讯翻译君在线翻译怎么翻译整个文件_希腊语怎么翻译?教你两个超实用的翻译方法...
- Linux的DHCP的工作原理
- 西门子哪款plc支持c语言,西门子PLC的几种编程语言简单介绍
- 通过路由器来设置局域网下无线打印机打印
- 计算机服务里wlan功能是什么意思,WLAN是什么意思?WLAN基础知识介绍
- 聊城开发区杨广平书记一行前来酷客多小程序总部视察
- 使用Python读取pdf文件
- poj_1363_Rai
- Android 源码分享之小米文件管理器
- 局域网中别人不能访问我的电脑
- pycharm中使用chatgpt
热门文章
- VC解决error C2065: 'timeGetTime' : undeclared identi
- 算法--------二叉树的前序遍历
- 调用startActivityForResult后直接调用onActivityResult
- java高级编程技巧
- swift_020(Swift 的属性)
- 并发 线程交替执行_并发与并行的区别
- diskgeniusv4.4.0_.NET Core 3.0及ASP.NET Core 3.0前瞻
- uniapp原生子窗体(弹出层为例子)
- 2018-2019-1 20165305 实验三 实时系统
- html5 响应式布局