精华内容
下载资源
问答
  • html居中代码
    千次阅读
    2021-06-10 07:12:57

    CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.

    可是事实上这样的方法科学吗?

    经过网络搜索和亲自实验得出以下结论:

    正确的也是对页面构造没有影响的设置如下:

    对需要水平居中的DIV层添加以下属性:

    复制代码代码如下:

    margin-left: auto;

    margin-right: auto;

    经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!

    郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.

    问题到底出在哪里呢?

    感谢网友乐天无用帮忙找出了这个邪门问题的原因.

    原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.

    问题并不在CSS而在XHTML网页本身.

    需要加上这样的代码才能使得上述设置有效果:

    复制代码代码如下:

    如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.

    以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.

    如何使DIV居中

    主要的样式定义如下:

    body {TEXT-ALIGN: center;}

    #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

    或者 我们常用margin简短写法

    复制代码代码如下:

    body {TEXT-ALIGN: center;}

    #center { margin:0 auto;}

    说明:

    首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

    需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只

    要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

    如何使图片在DIV 中垂直居中,用背景的方法。举例:

    body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

    关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

    如何使文本在DIV中垂直居中

    如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

    test content

    提示:您可以先修改部分代码再运行

    说明:

    vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。

    CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中

    复制代码代码如下:

    body

    {

    text-align: center;

    }

    #a

    {

    width: 200px;

    height: 400px;

    background: #000;

    }

    #b

    {

    margin-top: expression((a.clientHeight-50)/2);

    width: 50px;

    height: 50px;

    background: #FFF;

    }

    #c

    {

    position: absolute;

    left: expression((body.clientWidth-50)/2);

    top: expression((body.clientHeight-50)/2);

    width: 50px;

    height: 50px;

    background: #F00;

    }

    另一方法: 通过css的expression,比较占客户端cpu,不建议使用

    复制代码代码如下:

    二,用JS使层居中

    把如下代码加入

    区域中

    复制代码代码如下:

    素材网

    style="CURSOR: hand" width=21>х

    height=91>欢迎光临本站!

    本站域名:

    https://www.jb51.net

    function moveit() //这个函数用于把层放到浏览器中间

    {

    L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2) document.body.scrollLeft;

    L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2) document.body.scrollTop;

    }

    window.οnlοad=moveit; //网面打开时时执行moveit()

    window.οnresize=moveit; //当调整浏览器大小时执行moveit()

    window.οnscrοll=moveit; //当拉动滚动条时执行moveit()

    三,用定位方法居中

    解释:这个方法以前只是知道,但一次一个朋友问我方法的原理,那时我没有答上来,前几天看了一文章后才突然明白了它的原理!以前我的理解是先左边界-370px,然后是想position问题,所以始终想不通。其实我们可以反过一想先定位后边界,这样就很容易理解了。position:absolute;它是对浏览器定位的,left:50%;正好在中间的位置上,也就是这个DIV块左边界上处于游览器的中间位置,在加入样式margin-left:-370px,这个370是算出来的,它恰好是div740的一半,我们让DIV往回走370,这样DIV的中线与浏览器的中线重合所以看到的DIV总是在中间的!这个方法也有一个缺点就是如是你

    更多相关内容
  • html居中代码怎么写?

    万次阅读 2021-11-16 07:48:57
    <div>居中 - 法1 通过中心点,计算坐标来...html> <head> <style type="text/css"> .content { background-color: rgb(87, 87, 92); position: absolute; /* 水平居中 */ left: 50%; wid
    <div>居中 - 法1

    通过中心点,计算坐标来垂直居中。

    <html>
    
    <head>
        <style type="text/css">
            .content {
                background-color: rgb(87, 87, 92);
                position: absolute;
                /* 水平居中 */
                left: 50%;
                width: 30%;
                margin-left: -15%;
                /* 垂直居中 */
                top: 50%;
                height: 30%;
                margin-top: -15%;
            }
        </style>
    </head>
    
    <body>
        <div class="content">Content goes here</div>
    </body>
    
    </html>
    

    <div>居中 - 法2
    <html>
    
    <head>
        <style type="text/css">
            #content {
                position: absolute;
                /* 垂直居中 */
                top: 0;
                bottom: 0;
                height: 50%;
                /* 水平居中 */
                left: 0;
                right: 0;
                width: 70%;
                margin: auto;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div id="content"> Content here</div>
    </body>
    
    </html>
    

    垂直居中:vertical-align

    设置单行或表格单元格内元素,垂直方向上的位置,不能用块级元素。可用属性值:top middle bottom 等,详细说明.

    <html>
    
    <head>
        <style type="text/css">
            .middle {
                vertical-align: middle;
            }
        </style>
    </head>
    
    <body>
        <div>
            An
            <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32"
                height="32" />
            image with a middle alignment.
        </div>
    </body>
    
    </html>
    

    文字居中:line-height

    将文字line-height等于父容器的高度,即可垂直方向上居中;text-align可让文在水平方向上居中。

    <html>
    <head>
        <style type="text/css">
            #wrapper {
                height: 100px;
                background-color: red;
            }
    
            .content {
                /* 文字垂直居中 */
                line-height: 100px;
                /* 文字水平居中 */
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div id="wrapper">
            <p class="content">Content goes here</p>
        </div>
    </body>
    
    </html>
    

    参考链接
    展开全文
  • html文字居中 html图片居中代码

    千次阅读 2021-06-08 18:48:21
    html图片居中方法代码,通过在html中实现文字居中图片居中篇�?a href="//www.css5.com.cn/html/">html中实现文字图片内容居中有三种方法,其中两种使�?a href="//www.css5.com.cn/">CSS样式实现,一直使用...

    html文字居中�?a href="//www.css5.com.cn/html/352.shtml">html图片居中方法代码,通过在html中实现文字居中图片居中篇

    �?a href="//www.css5.com.cn/html/">html中实现文字图片内容居中有三种方法,其中两种使�?a href="//www.css5.com.cn/">CSS样式实现,一直使用原始的html标签内加�?ldquo;align="center"”�?a href="//www.css5.com.cn/css/350.shtml">居中)实现�?/p>

    一、对body加CSS居中样式

    我们直接�?a href="//www.css5.com.cn/html/356.shtml">body设置CSS样式�?strong>text-align:center

    1、完整HTML实例代码�?/p>

    CSS5之居中实�?lt;/title>

    body{text-align:center}

    我会被居�?

    2、居中实例截�?/p>

    403dd70d6c73c02cf98b78462258dc35.png

    对body设置居中实现文字或图片居中截�?/p>

    二、对文字外层对象加css居中样式

    首先我们CSS命名选择器为“.CSS5”,对此选择器内加居中样式。我们实例演�?�?a href="//www.css5.com.cn/">DIV对象,一个放文字一个放图片�?/p>

    1、对应CSS代码如下�?/p>.CSS5{text-align:center}

    2、完整HTML+DIV+CSS代码如下�?/p>

    CSS5之居中实�?lt;/title>

    .CSS5{text-align:center}

    我会被居�?lt;/div>
    CSS5-logo.gif

    3、CSS实现对象内图片和文字居中效果截图

    a2b565998d51036a800ff6cfc178ab7a.png

    实现html文字居中-html图片居中实例截图

    这里说明,图�?ldquo;CSS5-logo-201305.gif”文件是与html放一起,使用html img标签实现图片引入html�?/p>

    4、本居中实例在线演示�?a href="//www.css5.com.cn/yanshi/201308/2013081701/" class="yanshi" target="_blank">查看案例

    5、本居中实例打包下载�?/p>

    三、之间对文字外层对象加align="center"

    此方法是以前较为常见的方法,直接在html标签内使用align="center"即可实现对象内图片或文字内容实现居中�?/p>

    我们实例演示HTML表格里居中与一般HTML标签内内容居中�?/p>

    1、完�?a href="//www.css5.com.cn/html/26.shtml">HTML源代�?/a>�?/p>

    html align居中
    我会居中�?lt;/div>
    表格中居�?lt;/td>

    2、实例效果截�?/p>

    b6b2a1af8deb1823b4a9cc5855ecdc4d.png

    html文字居中�?a href="//www.css5.com.cn/html/380.shtml">html table表格内文字居中实现截�?/p>

    直接在标签内使用align属性,方便实践普�?a href="//www.css5.com.cn/html/323.shtml">html标签和html表格标签内使�?ldquo;align="center"”居中代码实现对象内内容居中�?/p>

    标签(Tag): 居中 html

    本文分享URL地址�?a href="/html/603.shtml">/html/603.shtml

    作者:css5

    展开全文
  • html文字居中代码怎么写

    千次阅读 2021-06-27 08:07:27
    html文字居中代码怎么写发布时间:2020-04-22 15:24:48来源:亿速云阅读:229作者:小新html文字居中代码怎么写?相信有很多人都不太了解,今天小编为了让大家更加了解html文字居中代码,所以给大家总结了以下内容,...

    html文字居中代码怎么写

    发布时间:2020-04-22 15:24:48

    来源:亿速云

    阅读:229

    作者:小新

    html文字居中代码怎么写?相信有很多人都不太了解,今天小编为了让大家更加了解html文字居中代码,所以给大家总结了以下内容,一起往下看吧。

    1c29fa7830249e82ff6e80cd76240e68.png

    文字水平居中

    水平居中

    .box {

    width: 300px;

    height: 200px;

    background: palegoldenrod;

    text-align:center;

    }

    水平居中了--文本文字

    效果图:

    a80c4d48ead3e56a66e0ec6f84d58f21.png

    说明:text-align

    text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,想要使文本居中,直接使用center即可。

    该属性设置文本和img标签等一些内联对象(或与之类似的元素)的居中。

    文字垂直居中

    垂直居中

    .box {

    width: 300px;

    height: 300px;

    background: paleturquoise;

    line-height:300px;

    }

    垂直居中了--文本文字

    效果图:

    e1df35ba2cd747f9ee87105b2f622653.png

    line-height 属性设置行间的距离(行高)。不允许使用负值。

    该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

    关于html文字居中代码怎么写就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

    展开全文
  • 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" xml:lang="en" lang="en"> <...
  • html语言 让文字居中代码是什么?

    千次阅读 2020-12-20 10:17:12
    展开全部html中,让32313133353236313431303231363533e58685e5aeb931333365653839文字居中的css代码:1、平水居中:text-align:center;2、垂直居中:line-height:height;具体代码如下:文字垂直居中body{background...
  • 1.水平居中text-align:center; 在没有浮动的情况下,我们可以让需要居中的块级元素设为inline/inline-block,然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素(span,img,a等),...
  • html上下居中代码怎么写

    千次阅读 2021-06-28 07:47:47
    1. 如何用html代码实现网页上下居中这个问题对很多新手来说都是难以挑战的难度,就是网上有代码很多人都难以了解。其原理很简单,就是把块级元素变成行内元素,定义样式vertical-align:middle,让其垂直居中。这里面...
  • html文字居中和html图片居中方法代码,通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法,其中两种使用CSS样式实现,一直使用原始的html标签内加入“align=center”(居中)实现。...
  • html里文字居中代码怎么写?

    千次阅读 2021-06-09 02:19:49
    详细内容html里文字居中代码怎么写?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。文字水平居中水平居中.box {width: 300px;height: 200px;background: ...
  • HTML之三种居中

    2018-03-22 21:22:05
    HTML之三种居中,1.表格布局页面居中,2.div布局页面居中,3.框架布局页面居中
  • 复制代码代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title></title> <style type=”text/css”> .center{text-align:center;} <...
  • HTML中怎么使文字各种居中对齐?(代码示例)

    万次阅读 多人点赞 2020-06-12 21:17:53
    本篇文章主要介绍了如何去写关于html文字居中代码。希望对有需要的朋友有所帮助。 web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线) html文字居中代码具体示例如下: <!DOCTYPE HTML> <...
  • div居中代码 DIV水平居中显示CSS代码

    千次阅读 2021-08-05 01:26:12
    div居中代码 DIV水平居中显示CSS代码2018-09-07div居中代码 DIV水平居中显示CSS代码如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢?需要的主要css代码有两个,一个为text-align:center(内容居中),另外一...
  • html中如何居中

    千次阅读 2021-02-23 14:08:15
    第三步:首先我想让最外层的div进行真正意义上的居中——既在浏览器页面水平方向和垂直方向都居中显示。 第三步:开始编写css样式: 第四步:上述样式解释,因为设置了div的宽度为400px,高度为200px。又设置了...
  • 文字和图片居中HTML代码怎么写?

    万次阅读 2017-05-04 14:10:06
    html文字居中和html图片居中方法代码,通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法,其中两种使用CSS样式实现,一直使用原始的html标签内加入“align="center"”(居中)实现。...
  • 代码如下: function preview(oper) { if (oper ”;//设置打印开始区域 eprnstr = “<!–endprint” + oper + “–>”;//设置打印结束区域 prnhtml = bdhtml.... //从开始代码向后取html prnhtml = prnhtml.substr
  • 表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行。 但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网、活动展示网等等的时候。 问题: 实现div垂直居中并在缩放...实现代码
  • html5表格中标题caption如何居中用CSS控制就可以了。...以下是源代码htmlHTML5,自定义弹出对话框怎么设置居中关闭 .mask{position:fixed;left:0;right:0;top:0;bottom:0;font-size:0;tex...
  • 复制代码代码如下:”wrap”> 我在中间…… </div>.. height+line-height+text-center(只能居中单行) .wrap{ width:px; height:px; border:px solid red; text-align: center; line-height: px; } ps:text-align:...
  • web前端是什么意思?...html里文字居中代码怎么写?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。文字水平居中水平居中.box {width: 300px;height: 200px;ba...
  • 居中代码是什么?相信很多刚学css都会有这样的疑问,下面我们来总结一下。目前最新版本的HTML(HTML5)不支持“center”标签,因此您需要使用CSS样式格式将HTML5文档中的文本居中。一:html文字怎么居中?【推荐学习:...
  • HTML如何让文字居中?附两种方式

    千次阅读 2021-06-08 17:36:28
    具体代码如下:w3cschool--编程狮w3cschool--编程狮w3cschool--编程狮w3cschool--编程狮最终效果如下:方法二、div内文字居中如果想要令 div 内的文字居中显示,则需要通过设置文字的行高进行设置。具...
  • html文本上下左右居中

    2016-05-14 15:19:53
    html文本上下左右居中
  • html中如何设置浏览器中标题前的logo?如题,CSS布局HTML小编今天和大家分享详解。在标签之间输入 或者用favicon表示: 规格有32×3128×...HTML中怎么设置标题居中本人刚学Dw,希望热心的网友帮助,。HTML中设置标题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 134,228
精华内容 53,691
关键字:

html居中代码