DIV 垂直 垂直水平 居中

DIV 垂直 居中


让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。  .style{margin-left:auto;margin-right:auto;}  缩写形式为:  .style{margin:0 auto;}  数字0 表示上下边距是0。可以按照需要设置成不同的值。 

<style type="text/css">

.align-center{

margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */

width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

background:red; /* 背景色 */

/* 文字等内容居中 text-align:center;*/

}

</style>

@Html.Partial("_PartialMenuImg", "../../Images/Sys/test.jpg")

<div class="align-center"></div>

DIV 垂直水平 居中


1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;  对于ie6,只能把position:改成absolute; 

<!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" lang="zh-cn">

<head>

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

<title>水平垂直居中div演示效果</title>

<style type="text/css">

.align-center{

position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;

}

</style>

</head>

<body>

<div class="align-center">水平垂直居中div演示效果</div>

</body>

</html>

时间: 2024-11-11 09:40:44

DIV 垂直 垂直水平 居中的相关文章

浅谈position、table-cell、flex-box三种垂直(水平)居中技巧

一.首先是喜闻乐见的position方法,经典且万能,用法如下: 1 父元素{ 2 position:relative; 3 } 4 子元素{ 5 position:absolute; 6 top:50%; 7 left:50%; 8 margin-top:/*该元素height*0.5的负值*/; 9 margin-left:/*该元素width*0.5的负值*/; 10 } 不需要水平居中可以去掉left和margin-left.  划重点:需要父元素和子元素都定义宽高,自适应是不可能自适应

将图片在div中进行水平和垂直对齐

将图片在div中进行水平和垂直对齐 要进行水平对齐,只需在父级元素的样式中指定: text-align: center; 注意,是在父级元素的样式中指定,而不是在img本身的样式中指定. 要进行垂直对齐,相对来说则麻烦得多.期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样).真正有效的方法如下: 首先,由于vertical-align: middle这个样式是只有在displa

水平和垂直方向都居中

水平和垂直方向都居中:我们可以在水平上用text-align:center;竖直方向上是vertical-align: middle;但是这个只能用在特定的元素上: 父元素:display:table;子元素:display: table-cell; 例子:父元素: display: table; width: 100%; margin-bottom: 13px; overflow: hidden !important; 子元素: display: table-cell; margin-bott

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

Android学习笔记技巧之垂直和水平滚动视图

[java] view plain copy <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_conte

海外最新的垂直市场水平化攻略。拿走,不谢!

编者注:本文来自国外著名的VC Josh Breinlinger的个人博客,中文版由天地会珠海分舵进行编译,发布当天同时上了36氪和虎嗅头条,希望csdn的朋友也会喜欢.文中作者对当今炙手可热但众说纷纭的垂直市场进行了非常深入的分析,别开生面的提出了垂直市场水平化的这一新颖的概念,以市场象限模型图的形式指引大家走出众说纷纭的迷雾,找到属于自己的盈利模式- 在创业圈子里,大家对描述"Craigslist分类现象"的那张盛传已久的图片应该并不陌生(编者注:该图片描述的就是,针对美国数一数二

flex align-center:center多行垂直方向居中 align-items:center垂直方向单行居中

align-center:center多行垂直方向居中 align-items:center垂直方向单行居中 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8665647.html

jQuery如何将div设置为水平垂直居中

jQuery如何将div设置为水平垂直居中:使用CSS也可以实现div的水平垂直居中效果,但是有时候可能需要动态的调整,下面就介绍一下如何用jQuery实现对象的水平垂直居中效果,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.c

div居中和table居中

一.div居中 margin-left: auto;margin-right: auto; <div  style="width:960px ; margin-left: auto;margin-right: auto;"  ></div> 二.table居中 margin:auto; .searchclass { width:960px; min-height:80px; border-right:1px solid #000;border-bottom:1p