首页 > 软件开发 > CSS >

float居中怎么设置

来源:互联网 2023-03-16 19:11:24 403

一般情况下,我们在使用css中的float属性时,通常设置值为left或right,没有直接居中显示的。那么,如果一个元素使用了float属性,想要将这个元素居中显示如何设置呢?4T2办公区 - 实用经验教程分享!

float居中怎么设置4T2办公区 - 实用经验教程分享!

工具/原料

  • HTML5
  • CSS3
  • HBuilderX
  • 浏览器
  • 截图工具

方法/步骤

  • 1

    在HBuilderX工具已创建的Web项目,鼠标右键新建html,输入文件名称为float.html

    4T2办公区 - 实用经验教程分享!

    4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 2

    打开float.html文件,向body标签中插入一个无序列表4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 3

    在无序列表元素ul外层的div标签添加一个class属性,设置文字居中、元素居中

    4T2办公区 - 实用经验教程分享!

    4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 4

    保存代码并运行项目,打开浏览器查看效果,发现无序列表的点和子项分离了4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 5

    利用class和元素组合的选择器,设置无序列表float为left,然后left设置为50%4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 6

    再次保存代码并刷新浏览器,可以看到无序列表的点去掉了,纵向排列变为横向排列,并且是居中显示4T2办公区 - 实用经验教程分享!

    float居中怎么设置4T2办公区 - 实用经验教程分享!

  • 6此文章未经许可获取自百度经验
  • 总结

    • 1、创建Web项目4T2办公区 - 实用经验教程分享!

      2、建HTML页面4T2办公区 - 实用经验教程分享!

      3、添加无序列表4T2办公区 - 实用经验教程分享!

      4、设置样式属性4T2办公区 - 实用经验教程分享!

      5、保存代码预览4T2办公区 - 实用经验教程分享!

      6、修改刷新查看4T2办公区 - 实用经验教程分享!

      float居中怎么设置4T2办公区 - 实用经验教程分享!

    注意事项

    • 注意css中的float的基本用法
    • 注意如何使用float设置居中

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4T2办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码