<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
 .clearfix { zoom:1; }
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
 .inwrap{ float:left; position:relative; left:50%;}
 .page { float:left; position:relative; left:-50%; }
 .page li { float:left;margin:0 5px; }
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<div class="wrap clearfix">
 <div class="inwrap">
 <ul class="page">
  <li> <a href="#">上一页</a> </li>
  <li> <a href="#">1</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">5</a> </li>
  <li> <a href="#">6</a> </li>
  <li> <a href="#">下一页</a> </li>
 </ul>
 </div>
</div>
</body>
</html>
 
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。

css浮动的元素居中的更多相关文章

  1. css实现绝对定位元素居中

    前端我们时常需要封装一些弹出框,这些弹出框大小都不能确定,多半是用js实现居中. 现在有了css3可以不用js了. .box{ background-color: blueviolet; width: ...

  2. css实现页面元素居中

    水平居中 对于已知宽度的块级元素实现水平居中只需要设置 margin-left:auto; margin-right:auto; 对于多个块级元素实现水平居中只需要设置 //1 父类{ text-al ...

  3. 【CSS】定位元素居中显示

    1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...

  4. css块级元素居中

    <!DOCTYPE html> <html> <head> <title>index</title> </head> <b ...

  5. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  7. CSS浮动元素的水平居中

    方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  8. CSS元素居中汇总

    总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使  margin-left=margin-right  如果设置  marg ...

  9. CSS元素居中的常用方法

    只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...

随机推荐

  1. php 七种数据类型介绍

    PHP有7个数据类型.七个类型: 字符串, 整数, 浮动, 布尔, 数组, 对象, 资源. 字符串 字符串保持字符,如“一”.“abc”,“www.manongjc.com”等.PHP字符串是区分大小 ...

  2. 省市县_me

    # question   11import astfrom functools import reduce def file_read():    with open('D:\\pytharm\\ji ...

  3. Python预编译语句防止SQL注入

    这个月太忙,最近不太太平,我的愿望是世界和平! ================================== 今天也在找python的预编译,早上写的sql是拼接来构成的.于是找了2篇文章,还 ...

  4. mysql级联删除

    一个building对应多个rooms,building删除----级联删除相关的rooms 第一步, 创建buildings表,如下创建语句: USE testdb; CREATE TABLE bu ...

  5. 修改IP

    查看系统版本 [root@host ~]# cat /etc/issueCentOS release 6.5 (Final)Kernel \r on an \m [root@host ~]# cat ...

  6. JDK1.7之后switch支持string

    转自:https://blog.csdn.net/tjcyjd/article/details/9666035 在Java7之前,switch只能支持 byte.short.char.int或者其对应 ...

  7. 异常信息ASM ClassReader failed to parse class file的问题解决

    jdk8与spring 3不兼容问题:用jdk7.或者升级到spring4 详情:异常信息ASM ClassReader failed to parse class file的问题解决

  8. Spring DevTools 介绍

    Spring DevTools 介绍 Spring Boot包括一组额外的工具,可以使应用程序开发体验更加愉快. spring-boot-devtools模块可以包含在任何项目中,它可以节省大量的时间 ...

  9. 机器学习入门-交叉验证选择参数(数据切分)train_test_split(under_x, under_y, test_size, random_state), (交叉验证的数据切分)KFold， recall_score(召回率)

    1. train_test_split(under_x, under_y, test_size=0.3, random_state=0)  # under_x, under_y 表示输入数据, tes ...

  10. 机器学习入门-Knn算法

    knn算法不需要进行训练, 耗时,适用于多标签分类情况 1. 将输入的单个测试数据与每一个训练数据依据特征做一个欧式距离. 2. 将求得的欧式距离进行降序排序,取前n_个 3. 计算这前n_个的y值的 ...