要使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. NOIP模拟 6.30

    Problem 1 护花(flower.cpp/c/pas) [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时 ...

  2. 转：CentOS上安装LAMP之第三步：MySQL环境及安装过程报错解决方案（纯净系统环境）

    这是AMP运行环境中最后配置的环境: 惯例传送门: 1.编译安装MySQL cd /home/zhangatle/tar tar zxvf mysql-.tar.gz cd mysql- cmake ...

  3. 存储过程详解 -SQLServer

    来源:http://www.cnblogs.com/knowledgesea/archive/2013/01/02/2841588.html 存储过程简介 什么是存储过程:存储过程可以说是一个记录集吧 ...

  4. Ubuntu 12.04 安装 IQQ

    1. 安装 IQQ 首先应安装jdk包 2. 百度网盘下载: http://pan.baidu.com/share/home?uk=3071047022 3. 运行 (1) Linux用户给IQQ-1 ...

  5. https比http到底那里安全？

    HTTPS和HTTP的概念 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP ...

  6. mac pro 1.5T内存是如何实现的

    苹果发布全新Mac Pro:28核1.5T内存 预计售价10万+ 看到这样的新闻标题是不是很震撼,甚至怀疑人生,64位机怎么就可以1.5T内存了,自己的系统盘都没那么大 而且我们知道windows下的 ...

  7. python ndarray相关操作：拼接

  8. Linux与Unix shell编程指南(完整高清版).pdf

    找到一本很详细的Linux Shell脚本教程,其实里面不光讲了Shell脚本编程,还介绍了系统的各种命令 http://vdisk.weibo.com/s/yVBlEojGMQMpv 本书共分五部分 ...

  9. MSSQL → 02：数据库结构

    一.数据库的组成 在SQL Server 2008中,用户如何访问及使用数据库,就需要正确了解数据库中所有对象及其设置.数据库就像一个容器,它里面除了存放着数据的表之外,还有视图.存储过程.触发器.约 ...

  10. Nginx教程(一) Nginx入门教程 （转）

    1 Nginx入门教程 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行.由俄罗斯的程序设计师IgorSysoev所开 ...