多行文字垂直居中

<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;
    color:#069;
    vertical-align:middle;
    /* 解决IE6 问题 */
    _font-size:100px;
}
.box a{
    display:inline-block;
    vertical-align:middle;
    font-size:12px;
}
</style>
</head>  

<body>

<div class="box">
         <a href="#">2013年01月曾答应博客园网站管理员会在博客园发</a>
      </div>

</body>
</html>  
时间: 2024-10-12 05:58:56

多行文字垂直居中的相关文章

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

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

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

假设有一个高度为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:

问题记录之-----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别人身材好训练猛才说不介意多吃,你多吃可不就是胖了吗!说你呢,还不运

display:table的用法(让块里的多行文字垂直居中)

https://www.jianshu.com/p/3022bfed0226 https://www.cnblogs.com/chen-cong/p/8076442.html 原文地址:https://www.cnblogs.com/chm-blogs/p/11516932.html

多行文字(图片)垂直居中

最近比较忙,没有时间更新博文.也就在这段时间遇到了些问题,其实这些问题以前遇到过,也处理了,但最近遇到这个问题突然间不知道怎么处理了.半年多没遇到过多行文字垂直居中的问题,可能是因为所处行业问题.好了废话不多说. 大家应该多遇到过这个问题,可能大家都知道怎么解决,但有多少人真的弄清楚它的原理呢? 说先我们先写出html,如下: <div class="cont"> <div class="hack"> <div class="

大小不固定的图片和多行文字的垂直水平居中

一.大小不固定,多行文字的垂直居中 ① 单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了.例如: 单行文字居中显示测试,css样式为:height:3em; line-height:3em;-- ② 多行文字 但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可能一行显示,也有可能多行显示:文字可能是小号字体,也有可能是大号的.这时候如何让其垂直居中显示呢?看下面! 这里的文字用来做多

如何使元素/文字 垂直居中?

昨天面试被问到这个问题,自己常用的是方法一和方法二,回来后查阅到了方法三,感觉莫名的好用,记录一下~ 方法一:单行文字垂直居中 line-height等于height 方法二:块级元素垂直居中 position定位或者flex布局 水平居中 margin: 0 auto;+垂直位移position: relative:top: 50%; 注意:此时当前操作元素的头部到达页面一半的水平线处, 最后使用transform: translateY(-50%),使得元素向上平移(translate)自身

div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

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