zoukankan      html  css  js  c++  java
  • 单行、多行文字的垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style>
    .container{ width:800px;  margin:0 auto; border:1px solid red;}
    </style>
    <body>
    
    <div class="container" >
        <h3>1.单行文字居中</h3>
        <!--设置行高来实现-->
        <div style="border:1px dashed red; line-height:60px; margin:30px;">
        这是高度为30像素的单行文字
        </div>
        
        <h3>2.多行文字不定高度居中</h3>
        <!--运用padding来实现-->
        <div style="border:1px dashed red; padding:60px 0; margin:30px;">
                <div>多行文字不定高度居中</div>
                <div>多行文字不定高度居中</div>
                <div>多行文字不定高度居中</div>
        </div>
        
        <h3>3.多行文字定高度居中</h3>
        <div style="border:1px dashed red; margin:30px; height:80px;">
            <span style="vertical-align:middle;display:inline-block; ">中中中<br>中中中中中中中中中中中中中</span>
            <!--span只能用line-heigth才能设置高度(用来撑开外边的div), 用font-size:0px;来隐藏文字(行高必须在不为空的情况下才起作用)-->
            <span style="line-height:80px; ; display:inline-block;">&nbsp;你看不到我哦(请设置font-size:0)</span>
        </div>
    
    </div>
    </body>
    </html>
  • 相关阅读:
    C#脚本引擎 CS-Script 之(一)——初识
    系分过了,mark一下,就从这里开始吧
    Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目
    Android--多选自动搜索提示
    Android--自动搜索提示
    Android--图片集
    Android--下拉框
    SQL Server 收缩日志
    Android--按钮点击事件
    Android--TextView 文字显示和修改
  • 原文地址:https://www.cnblogs.com/siqi/p/3138289.html
Copyright © 2011-2022 走看看