文档章节

div文字水平垂直居中 文字自动换行

随风而浮沉
 随风而浮沉
发布于 2015/11/25 16:25
字数 275
阅读 85
收藏 0
点赞 0
评论 0

<%@page contentType="text/html; charset=UTF-8" session="true" %>

<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<%@include file="/WEB-INF/jsp/include/head.jsp" %>

<%@include file="/WEB-INF/jsp/include/global.jsp" %>

<style type="text/css">


   html {overflow-y:auto}

   body{background: transparent;}

   .stastyle {

     height:50px;

     vertical-align: middle;

     line-height: normal;

     width:100px;

     margin:10px 8px 0px 0px;

     float:left;

     border:solid 1px #1e88e5;

     background:#123660;

     color:#ffffff;

     overflow: hidden;

     text-align: center;

   }

   .stastyle:hover {

    background:#315d8f;

    cursor:pointer;

   }

    .sleft {

     margin-top: 12px;

     display: inline-block;

     position: relative;

     overflow: hidden;

     padding: 0;

     vertical-align: top;

   }

   .stext {

    display: inline-block;

    vertical-align: top;

    width: auto;

    line-height: 24px;

    font-size: 12px;

    padding: 0;

    margin: 0 4px;

   }

</style>

</head>

<body>

<div style="height:100%; width:100%; text-align:center; margin:0px auto 0 auto;">

     <div id="station" style="height: 325px;width:350px;overflow-y: auto;"></div>

</div>

<script type="text/javascript">

$(function(){

var goalIndexId='${indexId}';

var goalUnitId='${unitId}'; 

seledarea(goalIndexId,goalUnitId);

}); 


//展现选中区域各台数据

function seledarea(indexId,unitId){

$.ajax({

type:"post",

url : "${ctx}/tousu/getseledarea",

data:{

"unitId":unitId

},

success:function(data){

$('#station').empty();

if(data.showtabel!=""){

for(var i=0;i<data.showtabel.length;i++){

createstadiv(data.showtabel[i]);

}

}

}

});

}

function createstadiv(showtabel){

var name = showtabel.name;

var id = showtabel.id;

var html = "";

html = "<div class='stastyle' onclick='javascript:onStaclick("+id+",\""+name+"\");'><span class='sleft'><span class='stext'>"+name+"</span></span></div>";

// html = "<a  href='javascript:onStaclick("+id+",\""+name+"\");' class='easyui-linkbutton' style='height:50px;width:100px;margin:10px 10px 0px 0px;float:left;'>"+name+"</a>";

$('#station').append(html);

//$.parser.parse("#station");

}


function onStaclick(unitid,name){

parent.setParams();

parent.parent.setGoalUnitId(unitid,true);

}

</script>

</body>

</html>


© 著作权归作者所有

共有 人打赏支持
随风而浮沉
粉丝 3
博文 37
码字总数 8542
作品 0
广州
程序员
DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

Q:你知道如何用line-height使多行文字垂直居中么?

我们先看运行效果: line-height实现一行或多行文字垂直居中 知识点 line-height(行高) : 指的是两行文字间基线之间的距离,而实际撑开div高度的不是height,而是line-height。 line box :...

Juicyangxj ⋅ 2017/11/29 ⋅ 0

DIV+CSS让文字垂直居中

也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...

晨曦之光 ⋅ 2012/05/16 ⋅ 1

css行高line-height的一些深入理解及应用

二、一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底...

manlianman ⋅ 2013/10/22 ⋅ 0

css 实现单行文本 多行文本垂直居中

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

LorinLuo ⋅ 2015/11/26 ⋅ 0

DIV和Table的水平、垂直居中

一般图片的居中问题容易解决,我的解决方法是通过样式设置: background-image:url(path) //链接图片的路径 background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有:r...

freedonn ⋅ 2014/11/10 ⋅ 0

CSS使用技巧

最近,我开始升级网志了。 在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用。 未来,本文将...

阮一峰 ⋅ 2010/03/31 ⋅ 0

css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng ⋅ 2015/10/21 ⋅ 0

CSS3常用知识

1.文本超出部分显示为... white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden; 2.文本超出多行结尾部分展示为... height: 46px; //它的值为行高乘以显示...

kouxiaomou ⋅ 2017/02/24 ⋅ 0

CSS 如何使DIV层水平居中

CSS 如何使DIV层水平居中 DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实...

Z_dragon ⋅ 2014/08/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部