专栏首页网页开发/美化在网页中常用到的几种居中方法

在网页中常用到的几种居中方法

1、行内元素水平居中,可以在父元素中使用text-align:center;垂直居中可以用,line-height:100px;例如:

<style type="text/css">
    div{<br />
        width:300px;<br />
        height:100px;<br />
        text-align:center;<br />
        line-height:100px;<br />
    }<br />
</style>
<div>文字居中</div>

2、块级元素水平居中,可以用margin:auto;代码如下:

<style type="text/css">
    div{<br />
        width:300px;<br />
        height:100px;<br />
        margin:0px auto;//上下边距为0,水平居中<br />
        background:#ccc;<br />
    }<br />
</style>
<div>文字居中</div>

3、元素绝对居中,利用定位position,代码如下:

<style type="text/css">
    div{<br />
        width:300px;<br />
        height:100px;<br />
        position:relative;<br />
    }<br />
    div p{<br />
        width:100px;<br />
        height:20px;<br />
        position:absolute;<br />
        margin:auto;<br />
        top:0;<br />
        bottom:0;<br />
        left:0;<br />
        right:0;<br />
    }<br />
</style>
<div>文字居中</div>

4、元素绝对居中的另一种方法,代码如下:

<style type="text/css">
    div{<br />
        width:300px;<br />
        height:100px;<br />
        position:relative;<br />
        background:#bbb;<br />
    }<br />
    div p{<br />
        width:100px;<br />
        height:20px;<br />
        position:absolute;<br />
        top:50%;<br />
        margin-top:-10px;<br />
        left:50%;<br />
        margin-left:-50px;<br />
    }<br />
</style>
<div>文字居中</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AntUI常规Forms表单

    爱知汇
  • AntUI文字书写范例(util/writing)

    爱知汇
  • AntUI卡片Cards

    爱知汇
  • jquery 置顶按钮

    这个图片我用了阿里的矢量图库,如果不懂如何使用的朋友,可以访问iconfont阿里巴巴矢量图标库从注册到使用。

    Devops海洋的渔夫
  • 分享一个跨浏览器固定定位的方法。

    我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果,这次又看到用这个办法做固定定位的,解开了我一个心结。 其实很简单,就是我...

    练小习
  • WordPress博客文章结尾加上“转载请注明来源”等字样

    找到single.php页面(注意可以在后直接编辑) 在博客里随便找一个文章点开,然后查看文章最后的地方,点击查看源代码,然后找到 image.png <div...

    苦咖啡
  • 标签之美三——超链接的嵌入 原

    通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

    珲少
  • Java Web Jsp EL ${ user.name }

    <%@ page language="java"  pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//...

    Hongten
  • Django网页模板的继承include与复用extends

    Django使用网页模板的方式分为两种, 一是建立代码块, 在新的页面导入代码块, 关键词为include 二是建立模板,新的页面在模板基础上扩充, 关键词为e...

    zhaoolee
  • 一个简单的表白网页

    公众号爱国小白帽

扫码关注云+社区

领取腾讯云代金券