要使div总是找不到原因居中很简单，float和display都可以实现，float就不说了，这里说一下display:line-block,比如四个或者多个div盒子，明明设置好了宽度后，总有一个上不去，检查来检查去:比如

这段代码应该并排排列的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style>

.main {

    margin: 0 auto;

    width: 1000px;

    height: 800px;

    border: 1px solid #F00;

    text-align: center;

    background: #933;

}

.divbox {

    box-sizing: border-box;

    width: 25%;

	padding:0px;

	margin:0px;

    height: 100px;

    background: #CCC;

    display: inline-block;

}

</style>

<body>

<div class="main">

  <div class="divbox"></div>

  <div class="divbox"></div>

  <div class="divbox"></div>

  <div class="divbox"></div>

</div>

</div>

</body>

</html>

运行结果是这样的

没有边框没用margin，中间却有缝隙，原因是因为display后div变成了内联元素，  内联元素代码换行会产生空格。

<div class="divbox"></div><div class="divbox"></div><div class="divbox"></div><div class="divbox"></div>

这样写就不会有问题，但是阅读起来不方便，那该怎么办？可以设置父级元素的font-size设置为0；问题就没了。

.main {

    margin: 0 auto;

    width: 1000px;

    height: 800px;

    border: 1px solid #F00;

    text-align: center;

    background: #933;

    font-size:0px;

}

.............

div盒子或者图片并排居中的更多相关文章

  1. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  2. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  3. html 中 div 盒子并排展示

    在项目中,遇到一个前端问题,觉得小问题就别去找前端工程师解决了,还是自己动动手吧. 相信不管小问题,大问题 都应该先自己尝试解决,google .度娘查查资料,这绝对是增加理解和记忆的好机会. ##问 ...

  4. DIV横向排列_CSS如何让多个div盒子并排同行显示

    如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...

  5. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  6. div css 伪类 不固定图片大小 居中， css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  7. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  8. html/css系列-图片上下居中

    本文详情:http://www.zymseo.com/276.html图片上下居中的问题常用的几种方法:图片已知大小和未知大小,自行理解 .main{ width: 400px;height: 400 ...

  9. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

随机推荐

  1. 基于pytest的接口测试

    最近要开展接口测试,起初打算使用公司已有的Fitnesse测试工具来进行接口测试.过程中发现,构造接口字段数据.测试数据都比较困难,接口参数多的时候,用例量就会很多,关键执行速度还慢.所以放弃了. 找 ...

  2. 利用InformationSchema与阿里云交易和账单管理API实现MaxCompute费用对账分摊统计

    利用MaxCompute InformationSchema与阿里云交易和账单管理API 实现MaxCompute费用对账分摊统计 一.需求场景分析 很多的企业用户选择MaxCompute按量付费模式 ...

  3. gcd(辗转相除法)

    证明过程: 假设用f(x, y)表示x,y的最大公约数,取k = x/y,b = x%y,则x = ky + b,如果一个数能够同时整除x和y,则必能同时整除b和y:而能够同时整除b和y的数也必能同时 ...

  4. LintCode_372 在O(1)时间复杂度删除链表节点

    题目 给定一个单链表中的表头和一个等待被删除的节点(非表头或表尾).请在在O(1)时间复杂度删除该链表节点.并在删除该节点后,返回表头. 思路 因为O(1)内删除所以 不能从头节点去遍历找他的前驱节点 ...

  5. KMLLayer

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...

  7. 【JZOJ4792】【NOIP2016提高A组模拟9.21】整除

    题目描述 麦克雷有一个1~n的排列,他想知道对于一些区间,有多少对区间内的数(x,y),满足x能被y整除. 输入 第一行包含2个正整数n,m.表示有n个数,m个询问. 接下来一行包含n个正整数,表示麦 ...

  8. 大数据技术之Hive

    第1章 Hive入门 1.1 什么是Hive Hive:由Facebook开源用于解决海量结构化日志的数据统计. Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提 ...

  9. oralce系统触发器

    系统事件是指基于oracle事件(例如logon.logoff和startup.shutdown)所建立的触发器,通过使用系统事件触发器,提供了跟踪系统或是数据库变化机制.下面介绍使用的系统事件属性函 ...

  10. PHPCMS快速建站系列之在线留言

    有两种方法 第一种方法: 利用留言板插件,在后台模板中,安装留言板插件使用,这里先不展开. 第二种方法: 表单向导的适用场合: 如果一个前台页面只是为了提交表单数据,那么就非常适合适用表单向导的功能, ...