文档章节

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

随风而浮沉
 随风而浮沉
发布于 2015/11/25 16:25
字数 275
阅读 100
收藏 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
博文 55
码字总数 10636
作品 0
广州
程序员
Q:你知道如何用line-height使多行文字垂直居中么?

我们先看运行效果: 知识点 line-height(行高) : 指的是两行文字间基线之间的距离,而实际撑开div高度的不是height,而是line-height。 line box : 每一行称为一条line box,它又是由这一行...

Juicyangxj
2017/11/29
0
0
css行高line-height的一些深入理解及应用

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

manlianman
2013/10/22
0
0
DIV+CSS让文字垂直居中

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

晨曦之光
2012/05/16
171
1
css 实现单行文本 多行文本垂直居中

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

LorinLuo
2015/11/26
60
0
DIV和Table的水平、垂直居中

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

freedonn
2014/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker update:更新一个或多个容器的配置

更新容器的配置 docker update:更新一个或多个容器的配置。 具体内容请访问:https://docs.docker.com/engine/reference/commandline/update/#options 语法:docker update [OPTIONS] CONTA...

lwenhao
37分钟前
1
0
unload事件

unload事件不触发的原因分析 1.代码位置不对,应该优先加载,不能放到回调函数中 2.浏览器不支持 3.最可能的原因,unload事件中触发的函数是一个异步执行的函数,浏览器是不允许在窗口关闭之后在...

狮子狗
49分钟前
1
0
DbForge Schema Compare for MySQL入门教程:如何连接到数据库

【dbForge Schema Compare for MySQL下载】 要创建连接: 1. 在“Connection” 工具栏上单击“New Connection”按钮 。 2. 在“Host” 框中输入主机名。 3. 在“Port” 框中输入端口信息。默...

Miss_Hello_World
52分钟前
1
0
公众号关联微信小程序

公众号关联小程序发送关联通知,对于推广小程序有着很大的帮助。所以问题来了,怎么做到在公众号关联小程序发送关联通知呢? 一:开发中遇到的问题 之前在开发过程中发现,公众号已经关联小程...

Code辉
今天
1
0
并发编程基础之JMM学习摘要

一、JMM定义 Java内存模型即Java Memory Model(JMM),JMM决定一个线程对共享变量的写入何时对另一个线程可见(内存可见性),从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系:线程...

狠一点
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部