css多行文本居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .page1 {
        border: 1px dashed red;
        width: 60%;
        height: 600px;
        text-align: center;
        font-size: 0;
    }

    .page1:before {
        content: ‘.‘;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        height: 100%;
    }

    .page2 {
        vertical-align: middle;
        display: inline-block;
        font-size: 18px;
    }
    </style>
</head>

<body>
    <div class="page1">
        <span class="page2">中中中<br>中中中中中中中中中中中中中</span>
    </div>
</body>

</html>
时间: 2024-10-10 04:44:11

css多行文本居中的相关文章

常用css表达式-最小宽度-上下居中

/* IE6下最小宽度的CSS表达式 */ width:100%; min-width:1024px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1024?"1024px":""); 模块垂直居中,兼容IE6,注意,模块的所有父辈标签不能有定位属性,不能有overflow:hidden; .duilian_right{width:90p

css中将div定位居中

一直,我是认为定一个width,然后写一句margin:0 auto,就可以,但是有时也会不管用. 例如当我要定一个宽度为700的div,用相对定位定在中间.任你怎么拉伸都是居中. 看实例子       <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javasc

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

典型的DIV+CSS布局——固定宽度且居中的版式

典型的DIV+CSS布局——固定宽度且居中的版式中,运用的是浮动属性:这个实例,则运用了绝对定位属性. 1.在#container中设置“position:relative;”,其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准. 2.左侧列#left_side和右侧#right_side列采用绝对定位,并且固定这两个div的宽度,而中间列#content由于需要根据浏览器自动调整,因此不设置类似属性. 但由于另外两个块的position属性设置为absolute,此时必

CSS中的各种居中方法总结

CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 顾名思义,行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text-align:center 来实现.另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法.但有个首要条件是子元素必须没有被float影响,否则一切

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

[css]单/多行居中&amp;字体设置

行高和字号 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. line-height: 40px; 文字,是在自己的行里面居中的.比如,现在文字字号14px,行高是24px.那么: 为了严格保证字在行里面居中,我们的工程师有一个约定: 行高.字号,一般都是偶数.这样,它们的差,就是偶数,就能够被2整除. 单行文本垂直居中 需要注意的是,这个小技巧,行高=盒子高. 只适用于单行文本垂直居中!!不适用于多行. 如果想让多行文本垂

(前端)html与css css 13、多种居中方法

一.文字居中 1.水平方向居中: text-align: center; 2.垂直方向: ①:单行文本居中,行高等于盒子高↓ line-height: 200px; 完整代码.效果图 ↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln

Js配合CSS实现的图片居中

CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向都居中,也不是上下左右居中,位于网页的正中央,代码如下: <body onresize="myLoad()" > <div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolut