以前看到dlee讲过,将line-height设置为与DIV的高度相同就可以居中
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff;
line-height:300px;
}
-->
</style>
<div class="con_div">
测试内容ddddddddddd
</div>
今天又在
这里看到的一种方法,使用了CSS的vertical-align属性?
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
-->
</style>
<div class="con_div">
<span class="fixie"></span>
测试内容
</div>
再次看到
一种
<style>
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-100px;
border: solid 3px red;
}
</style>
<body>
<div id=warp>Test</div>
</body>
分享到:
相关推荐
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
图片垂直居中的css+div代码的几种方法编写
这是几种图片在div层的居中方法,其中垂直居中不好实现的问题是兼容性问题,其中有兼容性不错的居中方法实例。
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;...因此我们需要通过别的方法去实现元素的垂直居中,下面我总结了几种了常用垂直居
所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <div class=Centered1> <p>d第一种 </div> <!-css样式部分--> .Centered1{ ...
一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ...
有些方法在一些浏览器中无效,因此,到底选择哪种方法好,还要看具体情况。 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 复制代码代码如下: <div ...
4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例 第 5 章 CSS 基本布局属性 第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 ...
之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少。不过最近有人问了几个例子。...
作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用...
在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现。
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。 到现在为止,探讨了很多种方法。 HTML: XML/HTML Code复制内容到剪贴板 <body> <div u...
这种方法比较多,本文只总结其中的几种,以便加深印象。效果图都为这个: 方法一:position加margin XML/HTML Code复制内容到剪贴板 <div u00a0class=wrap> <div u00a0class=center></div> </div> CSS ...
今天我们就细数一下几种方法: 1,使用position:absolute,设置left、top、margin-left、margin-top的属性 CSS Code复制内容到剪贴板 .one{ position:absolute; width:200px; height:200px; top:50%;
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义 document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而...
Javascript 多浏览器兼容性问题及解决方案 ...4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...
原生alert的缺点 会阻塞一切操作,影响用户体验 很多浏览器会默认静止alert,...垂直居中方法有几种可选。我选用的是flex。关键性的css代码如下 .modal-mask{ position: fixed; top: 0; left: 0; right: 0; b
常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。 基本HTML <div class=box> 测试测试 </div> Easy-way 通过...
增加一根水平线,size为5px,宽度为50%,居中对齐,颜色为红色(red) 7、预格式化 作用:保留源文档中的回车 和 空格 的作用 <pre></pre> 8、分区元素 1、块分区元素 语法:<div></div> 作用:布局 2、行内...