要使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. 跟我一起做一个vue的小项目(一)

    项目架子 npm install --global vue-cli vue init webpack travel cd travel/ npm run dev 运行效果 添加home页及其路由,添加 ...

  2. JavaScript-JQ实现自定义滚动条插件1.0

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  3. 安装mysql报错2503

    安装MySQL-5.5.27报这个错误: The installer has encountered an unexpected error installing this package.This ...

  4. django 结合 bootstrap 使用

    git clone https://github.com/dyve/django-bootstrap3.git 要运行demo,需要在demo 中为其增加一个符号链接 bootstrap3 到上层目录 ...

  5. MVVMDemo

    QueryCommand.cs using System;using System.Collections.Generic;using System.Linq;using System.Text;us ...

  6. lingo 出现63. MODEL IS ILL DEFINED 解决办法

    63. MODEL IS ILL DEFINED. CHECK FOR UNDEFINED INDICES AND/OR CONDITIONS IN EXPRESSION: EXPRESSION. 还 ...

  7. iPhone开发之深入浅出 (7) — ARC总结

    原文链接:http://www.yifeiyang.net/development-of-the-iphone-simply-7/ 通过前面几篇文章的介绍,我想大家应该对ARC有了一个比较完整的理解. ...

  8. 视觉暂留-Info：这些神奇的“视觉暂留”动画，每一幅都让人拍案叫绝！

    ylbtech-视觉暂留-Info:这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 1.返回顶部 1. 这些神奇的“视觉暂留”动画,每一幅都让人拍案叫绝! 原创|发布:2018-05-28 19: ...

  9. Python的bisect模块

    Python的列表(list)类型内部是一个线性表,在线性表中查找元素复杂度为O(N),即调用list.index()的复杂的是O(N).当数据量较大时,应该使用二分查找优化,二分查找范围每次缩小一般 ...

  10. awss3

    import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.io ...