jsp页面中单行、多行文字的垂直居中

转载 2013年12月03日 14:05:46
<!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>
复制代码
http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html

如何让DIV相对于body水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用CSS和jQu...

jsp页面内容居中红色加粗增大文字效果

只是想做个jsp页面内容居中红色加粗增大文字效果,测试了好几种方法都不行还真是头疼,做页面真的很麻烦方法一:            这样.文字绝对会在正中间...      在...
  • muyu114
  • muyu114
  • 2010年07月13日 11:07
  • 17975

jsp中a标签的文字如何居中

在a标签加上style="display:block;text-align:center"即可

两种方式让DIV上下左右都居中--经测试兼容IE,FF,Opera,Google Chrome

第一种:全CSS控制,层漂浮(适用于做登陆页面)    代码如下:居中Demo
  • carlfan
  • carlfan
  • 2009年09月22日 13:01
  • 28605

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

css中垂直居中样式vertical-align:middle属性,但是此属性只对标签、、,和内联元素display设置为inline/inline-block起作用,其他的则不起作用。 1.单行文本...

input文本框文字垂直居中

这几天写网页需要设置表单样式,发现表单默认input文本框文字并不垂直居中而在顶端,如何调整呢,可以通过css来调整垂直高度,代码演示如下    height:...

让HTML中的文本框<input type="text">中的文字垂直居中

当你自己定义了 Text 的 height 属性时,在 Text 中输入的文字都不是垂直居中的,不过你可以添加CSS来控制它,让输入的文字垂直居中。...

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

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的...
  • yjl3039
  • yjl3039
  • 2015年06月04日 18:11
  • 363

大小不固定,多行文字的垂直居中

单行文字 可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:height:3em; l...

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

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jsp页面中单行、多行文字的垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)