CSS使用问题

  1. 给 <button> 添加 float 后,按钮不能点击
    float后,元素会与其他元素重叠,可使用z-index属性将元素放在最上层。
    z-inded越大则显示在越上面,且position属性为非staticz-inded才能生效。
<el-button style="float: right;position: relative;z-index: 1;">点击</el-button>
  1. 多个子元素在父元素中垂直居中
<div style="height: 100px;width: 500px;display: table-cell;vertical-align: middle;text-align: center;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div style="height: 100px;position: relative;">
    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

第一种方式必须设置width,而第二种方式不需要。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.样式引入的方式有哪几种? 一:内部样式 /*在这个写样式*/ 二:外部样式 方法一: 方法二: @impor...
    月花阅读 245评论 0 2
  • 一,css常见问题: 一、margin问题 上下margin重叠问题,即给相邻的两个div设置margin-bot...
    _往后_阅读 1,648评论 0 2
  • 引用CSS方式 内部引用 html文件中写一个 标签,并将样式写入到里面,举例: 外部引用 通过 标签实现,里面有...
    dawsonenjoy阅读 479评论 0 0
  • CSS3 不可思议的纯CSS导航栏下划线跟随效果 li::before { content: ""; po...
    色即是猫阅读 439评论 0 0
  • 对于CSS,要知其然,还要知其所以然。本文将介绍CSS各部分出现的原因,仅限个人理解,如有不妥,欢迎交流 Why ...
    web前端前沿技术阅读 364评论 0 0