html网页中如何实现居中效果(代码分享)

奋力向前
发布: 2021-08-11 17:34:57
原创
103870人浏览过
之前的文章《学习中值得了解html网页的基本结构(总结)》中,给大家介绍了一个html基本结构具体非常清楚,有了这个保证你不会颠三倒四。下面下篇文章给大家分享一下html网页中如何实现居中效果,有需要的朋友可以参考一下。

html网页中如何实现居中效果(代码分享)

html居中的元素可以分类为【行内】-【块状】-【行内块状】

常用的块状元素:

.....

      常用的行内元素:

      常用的行内块状元素:html网页中如何实现居中效果(代码分享)

      块级元素指定:使用text-align:center就无效了。

      立即学习前端免费学习笔记(深入)”;

      如果需要设置居中,通过设置左右两边的margin值为“auto”来实现。

      所以左右两边元素剩余区域各自均分,也就是元素两侧的区域各占50%,那么元素就左右居中了。

      宽度不固定的块级元素

      通常有三种方式来实现居中

      1、通过table元素来实现;

      2、设置 display: inline方法,将显示类型设为行内元素;

      3、设置position:relative利用相对定位的方式,将元素向左偏移 50%来实现居中。

      标签让标题居中

      <p align="center">关关和鸣的雎鸠,栖息在河中的小洲</p>
      登录后复制

      代码效果

      微信截图_20210812000746.jpg

      img图片居中的方法

      一般来说可以用CSS中的“text-align:center属性,margin:0 auto或定位属性”就可以居中。

      img定义一个父标签,让这个父标签里面的内容居中,那么img自然就居中

      <p align="center">img……</p>
      登录后复制

      input输入框居中的方法

      style="text-align:center; "
      登录后复制

      input外面嵌套div,设置div内部元素居中的方法

      <div align="center">
      <input value="帐号"size="20">
      </div>
      登录后复制

      html网页中如何实现居中效果代码示例

      <!DOCTYPE html>
      
      <html>
      
      <head>
      
      <meta charset="utf-8" />
      
      <title>网页制作</title>
      
      <style>
      
      *{padding: 0;margin: 0;}
      
      .news{width: 1080px;height: 200px;margin: 0 auto;}
      
      .left_1{width: 200px;height: 150px;float: left;padding: 10px;}
      
      .left_2{width: 200px;height: 150px;float: left;margin-top: 10px;}
      
      .center{width: 200px;height: 150px;float: left;padding: 10px;}
      
      .right_1{width: 200px;height: 150px;float: left;margin-top: 10px;}
      
      .right_2{width: 200px;height: 150px;float: left;padding: 10px;}
      
      a{ display: block; text-align: center;}
      
      a:hover{color:#00FF00;text-decoration: underline;}
      input.text{text-align:center;padding:10px 20px;width:300px;}
      
      </style>
      
      </head>
      
      <body>
      <style  type="text/css">
      .mydiv{
      	width:100%;
      	height:500px;
      	
      	text-align:center;
       }
       </style>
       <div style="width:960px; margin:0 auto; height:auto:">
       <p style="text-align:center;">@@##@@</p>
       </div>
       <div class="mydiv">
      <div class="reserch">
                      <div input style="text-align:center;"><input type="text";></div>
                      <button style="height:22px;width: 80px;text-align:center;">php搜一下</button>
                  </div>
      
      <div class="news">
      
      <div class="left_1">
      
      <a href="http://www.php.cn/" target="_blank">@@##@@</a>
      
         <a href="http://www.php.cn/" target="_blank">图片链接</a>
      
      </div>
      
      <div class="left_2">
      
      <a href="http://www.php.cn/" target="_blank">@@##@@</a>
      
          <a href="http://www.php.cn/" target="_blank">图片链接</a>
      
      </div>
      
      <div class="center">
      
      <a href="http://www.php.cn/" target="_blank">@@##@@</a>
      
          <a href="http://www.php.cn/" target="_blank">图片链接</a>
      
      </div>
      
      <div class="right_1">
      
      <a href="http://www.php.cn/" target="_blank">@@##@@</a>
      
          <a href="http://www.php.cn/" target="_blank">图片链接</a>
      
      </div>
      
      <div class="right_2">
      
      <a href="http://www.php.cn/" target="_blank">@@##@@</a>
      
          <a href="http://www.php.cn/" target="_blank">图片链接</a>
      
      </div>
      
      </div>
      
      </body>
      
      </html>
      登录后复制

      代码效果图

      html网页中如何实现居中效果(代码分享)

      想要单纯用html语言的话,那选择就是

      如果你是搞网页设计的话,建议你使用css语言来修饰网页。

      推荐学习:Html视频教程

      html网页中如何实现居中效果(代码分享)html网页中如何实现居中效果(代码分享)html网页中如何实现居中效果(代码分享)html网页中如何实现居中效果(代码分享)html网页中如何实现居中效果(代码分享)78.jpg

    以上就是html网页中如何实现居中效果(代码分享)的详细内容,更多请关注php中文网其它相关文章!

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号