问题记录之-----div中多行文字垂直居中

直接上代码,核心是用父div{position:relative},子span{position:absolute;transform: translate3d(0, -50%, 0)}

html代码:

<div class="main_box">
                <span v-if="poisonDay == 1">&nbsp&nbsp&nbsp&nbsp别人身材好训练猛才说不介意多吃,你多吃可不就是胖了吗!说你呢,还不运动去!</br></span>
            </div>

css代码:

.main_box {
                font-size: 26px;
                color: white;
                width: 500px;
                margin: 0 auto;
                height: 180px;
                position: relative;
                span {
                    position: absolute;
                    top: 50%;
                    transform: translate3d(0, -50%, 0);
                }
            }
时间: 2024-10-11 10:40:31

问题记录之-----div中多行文字垂直居中的相关文章

div css每行文字显示一半 同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些. 新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象. css字体文字重叠显示不完整重叠字体字体文字重叠显示不完整同时有重叠重合效果截图 在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:css行高小于CSS字体大小

实现DIV层内的文字垂直居中

有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法. 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: " This property affects the vertical positioning inside a line box of the boxes

实现DIV层内的文字垂直居中(转)

有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用的div文字垂直居中的方法. 首先要知道css里vertical-align无效,W3C官方对vertical-align做了下面的解释: “ This property affects the vertical positioning inside a line box of the boxes 

多行文字垂直居中

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多行文字垂直居中</title> <style> .box{ display:table-cell; width:100px; height:100px; border:4px solid #beceeb; colo

DIV+CSS如何让文字垂直居中?(转)

此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<spa

多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic

div中图片和文字同一行实现垂直居中

vertical-align作用对象为内联元素display设置table-cell后,magin和padding就会失效 #bj { height:100px; color: white; font-size: 30px; margin: 10px 0; display: table-cell; vertical-align: middle;/*div设置高度后,内部元素垂直居中*/ } #bj * { vertical-align: middle;/*实现垂直居中*/ } <body> &

固定高度的多行文字垂直居中

假设有一个高度为100px的 div,在这里放一行文字,垂直居中显示,这个大家都会,line-height设置为100px即可!那如果有两行.三行......多行呢?还能通过 line-height 解决么?答案很明显不能!下面一起来看下: 方法: 一.HTML结构 <div class="wrap"> <div class="subwrap"> <div class="content">aaaaa<br

固定容器高度的多行文字垂直居中

思路:把文字用span包裹起来,设置为inline-block,相当于图片img的属性.父div用table-cell的样式,用vertical-align:middle实习上下居中 <div class="box"> <span>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中</span> </div> .box{width:400px;height: