div如何居中

  整理一点关于div居中的方法。哪里有不妥欢迎大家拍砖~

  

  • div里的内容如何居中:

  水平居中(非块级元素): text-align:center;

  垂直居中:

  1. vertical-align:middle;
  2. 内容是文字的话,可以将height和line-height设置成一样的值;

  简单方法(但不是全部兼容):

1 display: -webkit-flex;
2 display: flex;
3 -webkit-align-items: center;
4 align-items: center;
5 -webkit-justify-content: center;
6 justify-content: center;
  • 整个div如何居中:

  定宽div水平居中: margin: 0 auto;  0表示上下边距是0,auto表示margin-left和margiin-top为auto;

  不定宽div水平居中:

  1. 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
  2. display:inline; text-align:center;
  3. 通过给父元素设置 float,然后给父元素设置 position:relative; left:50%; ,子元素设置  position:relative; left:-50%;

div水平居中:父div设置 width:100%;

时间: 2024-10-09 13:10:04

div如何居中的相关文章

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

左边图标右边文字,在div里居中

图1 图2 css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示.(div不设置宽度) 第一种做法: 图3 图4 .m-sn {    font-size: 12px;    color: #999;    background-color: #FFF;    line-height: 22px;    height: 22px;    padding-bottom: 24px;    text-align: center; // 这是最常用的} .m-sn s

css中将div定位居中

一直,我是认为定一个width,然后写一句margin:0 auto,就可以,但是有时也会不管用. 例如当我要定一个宽度为700的div,用相对定位定在中间.任你怎么拉伸都是居中. 看实例子       <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javasc

html中div的居中

背景:html中的div可以说是布局神器,但是有些时候没有那种一步到位的属性来定义某个div来居中.故需要手动写css来调试 代码(code): <style type="text/css"><!-- div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }--></

HTML5:footer定位(底部+居中)的探讨+div图片居中问题

初学HTML+CSS布局,尝试自己写一个百度首页,但是footer的定位遇到麻烦并且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指点一二,在此先谢过. 首先是设置为 footer{     clear: both;     display: block; position: absolute; bottom: 100px; } 时效果为:确实绝对定位到了底部,但是由于是绝对定位,使用 footer{     clear: bo

设定div始终居中显示

<script type="text/javascript"> (function($){ $.fn.extend({ center:function(options){ //center插件 var options=$.extend({ //默认属性值 inside:window, //元素居于窗体中心 transition:0, //元素居中移动时的时间,单位是millisecond minX:0, //元素最小X方向距边值 minY:0, //元素最小Y方向距边值 w

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

多个div同时居中的写法

多个div在某个div的中间,他们个数不一定但是需要在那个父级div中显示(和margin:0 auto一样的效果) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div_allinline

写个简单的,div可以居中的html

<!--html5的规范标准开头--> <!doctype html> <head> <!-- 声明当前页面的的文档类型,字符集--> <meta http-equiv="Conten-Type"  content="text/html" charset="gbk"> <!--当前页面的三要素--> <title>hello world</title>