HTML 元素居中的方法
网址:http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html
1. 元素的定位的方法选择 :absolute 。
2. 给定元素的宽和高。
3.因为是absolute定位的方法, 用百分比的方法,借用left和top的属性,将元素的左上顶点的坐标定位到屏幕的中心。
4. 矫正图片的位置,margin-top和margin-left可以为负数时的属性作用,将margin-left和margin-top的值,分别定位元素宽和高的值的一半,并取为负数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello The World!</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style>
#feeling{
background-color: #0000CD;
position: absolute;
width: 800px;
height: 600px;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;
}
</style>
</head>
<body>
<id id="feeling">
</id>
</body>
</html>
HTML 元素居中的方法的更多相关文章
- cssy元素居中的方法有哪些?
css的元素居中 各位小伙伴们在努力写网页的时候有没有遇到过这样的一个问题呢? 在写的时候发现他不居中,可是要分分钟逼死强迫症的啊! 别急,我来啦 哈哈哈 今天就带来三种css的元素居中的方法 第一种 ...
- CSS设置元素居中的方法
1.margin:0 auto; 2.body{text-align:center;} 3.position:absolute; left:50%; margin-left:-(宽/2);
- Css元素居中设置
你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- diplay:table-cell和伪元素:after方法让图片居中
让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试 目前接触两种方法 display:table-cell和伪元素:after方法 ...
- 网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
随机推荐
- Docker Compose部署项目到容器-基于Tomcat和mysql的商城项目(附源码和sql下载)
场景 Docker-Compose简介与Ubuntu Server 上安装Compose: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
- Jackson 序列化和反序列化
博客地址:https://www.moonxy.com 一.前言 Jackson 功能很强大,既能满足简单的序列化和反序列化操作,也能实现复杂的.个性化的序列化和反序列化操作.到目前为止,Jackso ...
- charles 结构体
本文参考:charles 结构体 Charles 主要提供两种查看封包的视图,分别名为 Structure/结构视图 Sequence/序列视图 Structure/结构视图 将网络请求按访问的域名分 ...
- [原创] Matlab 指派问题模型代码
指派问题的基本内容 一般来说指派问题解决的是如何将任务分配到人,使得任务完成的效益最大化(成本型效益则求最小值,利润型效益则求最大值).上述问题一个 0 - 1 整数规划问题. 问题围绕着任务和人展开 ...
- 【linux】【Zookeeper】Centos7安装Zookeeper-3.5.5
一 .下载zookeeper wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.5.5/apache-zookeeper-3.5.5 ...
- Android Studio [TextView]
MainAcitvity package com.xdw.secondapp; import android.content.Intent;import android.os.Bundle;impor ...
- Spring Environment的加载
这节介绍environment,默认环境变量的加载以及初始化. 之前在介绍spring启动过程讲到,第一步进行环境准备时就会初始化一个StandardEnvironment.下图为Environm ...
- js校验对象是否全部为空
function judgeIsNotBlank(obj) { var bool = true; var arr = Object.keys(obj); ; for(var key in obj){ ...
- mybatis list条件判断
<if test="userIds != null and userIds.size > 0"> AND user_id in <foreach colle ...
- office2019激活
这个是在网上偶然看见的一个激活方式,分享一下. 复制如下代码保存后修改文件后缀名为".bat",请注意有一个点,然后保存以管理员身份运行即可: @echo off(cd /d &q ...