当前位置: 首页 > article >正文

容器里面有两个元素,一个子元素居中,另一个子元素靠近容器右边.

1、使用 Flex:

.container {
  display: flex;
  justify-content: center; /* 使中间的元素居中 */
  align-items: center;     /* 垂直居中 */
}

.center-item {
  /* 居中元素不需要特殊样式,会自动居中 */
}

.right-item {
  margin-left: auto;      /* 将右侧元素推到最右边 */
}

2、使用 Grid:

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.center-item {
  grid-column: 2;        /* 放在中间列 */
}

.right-item {
  grid-column: 3;        /* 放在最右列 */
  justify-self: end;     /* 在列内靠右对齐 */
}

3、使用绝对定位:

.container {
  position: relative;
}

.center-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.right-item {
  position: absolute;
  right: 0;
}
居中元素
靠右元素

http://www.kler.cn/a/397946.html

相关文章:

  • 3D意识(3D Awareness)浅析
  • 通过地址获取LONG和LAT并且存入csv
  • 对称加密算法DES的实现
  • 实战:一文讲透模糊匹配的三种方式的区别
  • SwanLab安装教程
  • ubuntu16.04配置网卡
  • Javaweb-day12(登录认证)
  • 企业用能物联网协调装置
  • 关于强化学习的一份介绍
  • vue 获取摄像头拍照,并旋转、裁剪生成新的图片
  • 嘎嘎快充php版服务端部署配置注意玉阳软件
  • 购物车demo全代码-对接支付宝沙箱环境
  • 梧桐数据库中的循环函数统计提升数据库性能的详细指南
  • 文件的简单操作
  • 基于贝叶斯核张量回归的可扩展时空变系数模型
  • 一、Nginx反向代理(七层代理)二、Nginx的TCP/UDP调度器(四层代理)
  • Postgresql源码(138)alter table增加列的执行流程分析
  • MySQL系列之数据授权(privilege)
  • GBase8c 数据库审计项配置审计日志维护
  • 【安卓恶意软件检测-论文】DroidEvoler:自我进化的 Android 恶意软件检测系统
  • Notepad++的完美替代
  • Spring Boot 启动时修改上下文
  • 如何设置MySQL 数据库的默认字符集和默认排序规则
  • 【Golang】——Gin 框架中间件详解:从基础到实战
  • 【C++ 算法进阶】算法提升十五
  • 19-简单理解JavaScript中的Promise:手写Promise实现