文档章节

文字在div内水平垂直居中

Linklbj
 Linklbj
发布于 2016/11/06 19:51
字数 197
阅读 16
收藏 0

    在开发中,很多时候都需要将文字在div内水平垂直居中,最常见的如登录按钮。下面仅记录我的方法,我的工作领域是移动Web开发,所以基本上ie浏览器不考虑。望见谅。

    

<!DOCTYPE HTML>
<html>
<head>
<title>水平垂直居中</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
	div{
		width:200px;height:200px;  /*设置div的大小*/
		border:1px solid green;    /*边框*/
		text-align: center;        /*文字水平居中对齐*/
		line-height: 200px;        /*设置文字行距等于div的高度*/
		overflow:hidden;
	}
  </style>
</head>
<body>
<div>水平垂直居中</div>
</body>
</html>

亲测Chrome有效。

我本菜鸟,人生第一篇博客,有啥不对或者需要补充的地方还望各路大神指点。。

(●'◡'●)

© 著作权归作者所有

Linklbj
粉丝 0
博文 4
码字总数 1550
作品 0
深圳
私信 提问
CSS 如何使DIV层水平居中

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

Z_dragon
2014/08/18
61
0
Q:你知道如何用line-height使多行文字垂直居中么?

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

Juicyangxj
2017/11/29
0
0
前端知识复习(一)

1.CSS 中的盒子模型 画出对应的content, margin, padding, and border 边界 图片.png 2.元素 span, img, video 可以设置宽高吗? span不可以,img和video可以 span 属于行内非替换元素不能设...

治电小白菜
2017/11/28
0
0
DIV和Table的水平、垂直居中

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

freedonn
2014/11/10
87
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
697
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 笔记之Spring cloud config client

观察者模式它的数据的变化是被动的。 观察者模式在java中的实现: package com.hxq.springcloud.springcloudconfigclient;import org.springframework.context.ApplicationListener;i...

xiaoxiao_go
今天
4
0
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
今天
4
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
7
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部