文档章节

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

随风而浮沉
 随风而浮沉
发布于 2015/11/25 16:25
字数 275
阅读 121
收藏 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>


© 著作权归作者所有

共有 人打赏支持
下一篇: ftp操作
随风而浮沉
粉丝 3
博文 57
码字总数 10747
作品 0
广州
程序员
私信 提问
DIV+CSS让文字垂直居中

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

晨曦之光
2012/05/16
184
1
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
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

没有更多内容

加载失败,请刷新页面

加载更多

1个开发如何撑起一个过亿用户的小程序

本文由云+社区发表 2018年12月,腾讯相册累计用户量突破1亿,月活1200万,阿拉丁指数排行 Top 30,已经成为小程序生态的重量级玩家。 三个多月来,腾讯相册围绕【在微信分享相册照片】这一核...

腾讯云加社区
13分钟前
1
0
golang ssh包使用方法介绍

在使用gexpect包发现很多问题之外,这里又尝试使用ssh user@127.0.0.1的思路进行用户切换。这里记录下具体的使用方法,遇到的ssh: must specify HostKeyCallback 问题的解法方法及最终使用过...

linuxprobe16
19分钟前
0
0
layer

Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法 layer 实现弹窗提交信息 function confirmUpdateAward(i) { layer.open({ ...

mickelfeng
今天
1
0
Spring boot中如何获取profiles环境

  实现ApplicationContextAware @Componentpublic class QiNiuPropertiesConfig implements ApplicationContextAware { /// 获取当前环境public String getActiveProfile() { ret......

writeademo
今天
4
0
机器学习中的End-to-End到底是怎么回事?

简单讲就是,Input--->系统(这里指神经网络)--->Output(直接给出输入,NN神经网络就给出结果,一气喝成!!!) 借用一段对话:(http://dy.163.com/v2/article/detail/C3J6F2NJ0511AQHO....

火力全開
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部