首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我需要让两个按钮在中心左右对齐几个像素

要让两个按钮在中心左右对齐几个像素,可以使用CSS的Flexbox布局来实现。以下是一种可能的解决方案:

HTML代码:

代码语言:txt
复制
<div class="container">
  <button class="left-button">按钮1</button>
  <button class="right-button">按钮2</button>
</div>

CSS代码:

代码语言:txt
复制
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-button {
  margin-right: 5px; /* 左边按钮向右移动5像素 */
}

.right-button {
  margin-left: 5px; /* 右边按钮向左移动5像素 */
}

解释:

  • 首先,我们创建一个包含两个按钮的容器div,并为按钮添加相应的类名。
  • 使用CSS的Flexbox布局,将容器设置为display: flex;,这样容器内的元素将按照一行排列。
  • 通过justify-content: space-between;属性,使两个按钮在容器内水平分布,左右对齐。
  • 使用align-items: center;属性,使两个按钮在容器内垂直居中对齐。
  • 通过为左边按钮添加margin-right: 5px;,为右边按钮添加margin-left: 5px;,可以使两个按钮分别向右和向左移动5像素,从而实现在中心左右对齐几个像素的效果。

这是一种简单的实现方式,适用于常见的网页布局。如果需要更复杂的布局或动态调整,请根据具体情况进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

, 同时该父容器是一个圆角矩形 , 圆角半径为 8 像素 ; 该导航栏 上下各有 3 像素的外边距 , 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 该横向导航栏中 设置了 5 个元素...*/ height: 64px; /* 设置 上下 3 像素外边距 左右 4 像素外边距 */ margin: 3px 4px; /* 设置白色背景 */ background-color...-- 搜索栏右侧按钮 --> 的 <!.../ position: fixed; /* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子页面中居中对齐 先将盒子左侧设置到中心位置...*/ height: 64px; /* 设置 上下 3 像素外边距 左右 4 像素外边距 */ margin: 3px 4px; /* 设置白色背景 */ background-color

50820

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

Banner 上下各拉一条辅助线 , 测量其高度为 420 像素 ; Banner 中心位置有一张背景大图 , 居中对齐即可 ; Banner 条的版心尺寸为 1200 x 420 像素 , 如下图所示...1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...像素 */ height: 42px; /* 设置颜色 方便调试 */ /*background-color: pink;*/ /* 上下设置 20 像素外边距 , 左右自动居中 */ margin..., 总高度 42 像素 , 有 2 像素的下边框 */ height: 40px; /* 上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距...button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配

3.9K20
  • html笔记

    边框的意思,border="0"即为去掉边框,默认去掉边框 cellspacing 像素值,默认为2 单元格边框之间的空白距离 cellpading 像素值,默认为1 单元格内容与单元格边框之间的距离...width 像素值 宽,设置表格宽度 height 像素值 高,设置表格高度 align 左中右,left、center、right 表格在网页中对齐方式 表格还有一个 标题标签 ,即caption...>第一行第二格 第二行第二格 第二行第三格 这两个属性是写在...)submit(提交按钮)reset(重置按钮)image(图片)file(打开文件)date(日期) 试试看就知道啦 name 用户自定义 命名控件的名字,主要用于方便服务器识别控件 value 用户自定义...: middle; 顶部对齐 vertical-align: top; 是居中对齐

    1.8K10

    【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

    像素 ; 总体背景是白色的 ; 课程表 版心的右侧 , 可以设置成 右浮动 , 设置一个 50 像素的 外上边距 ; /* Banner 条右侧 课程表盒子样式 */ .course {...15 像素的内边距 ; /* Banner 条右侧 课程表 body 部分整体设置左右 15 像素内边距 */ .course-bd { /* 左右设置 15 像素内边距 */ padding:...最下方按钮 200 x 40 像素 , 文字 16 像素 , 边框 1 像素实线 , 垂直居中 , 水平居中 ; 样式如下 : /* Banner 条右侧 课程表 底部按钮样式 */ .all...像素 */ font-size: 16px; /* 设置文字颜色 */ color: #00a4ff; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 行高...1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42

    3.6K60

    Figma里这样完成悬浮FAB按钮制作,半小时搞定!

    此外,由于此按钮滚动时具有固定位置,因此我们可以状态更改时保持对齐。 3.组织和对齐按钮 移出子菜单项并添加到操作按钮框架。确认“add”按钮层是顶层。...对于间距,将“edit”对齐“Add”按钮上方 32 像素,“speak”“add”左侧 32 像素,最后是媒体,“speak”上方 16 像素“edit”左侧 16 像素。...4.复制Action按钮框架,将所有项目居中对齐 这将是我们的关闭状态。选中所有项目后,居中对齐。 快速提示:选中所有项目后,先对齐右下角,然后对齐中心。...如果我们首先对齐中心,所有项目都会移动到中心,这需要我们然后将框架中的所有层重新居中。这样我们也可以快速与框架对齐。...使用了默认的 300 毫秒。 9. 将动作按钮实例添加到框架,设置约束并检查固定位置 现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后,检查固定位置,以滚动时将其保持原位。

    2.4K20

    深度好文!UI界面视觉平衡的终极指南

    其实只是对下面的条形进行了视觉补偿处理,将长度延长了20px,以补偿下方条形尾部的间隙,使两个条形视觉上平衡。 ? 还有一些更复杂的形状案例。 ?...诀窍是,右边按钮的文本向左移动了一点,因为右边的边是三角形的。除此之外,还把箭头状按钮加宽了40px,这样看起来就与矩形按钮平衡了。 ? 按钮和文字不仅有垂直对齐,也有水平对齐的问题。...所以如果你要输出给开发人员,那么最好偏移一些距离,以便将图形维持视觉中心。 ? 播放按钮也是一样,如果你直接对齐这些形状,那么它们看起来会很奇怪。 ?...用大写高度对齐法通常是对齐文字与背景按钮的有效方法。 要让三角形图标与按钮对齐平衡,可以用其外接圆与背景按钮对齐。 >>>> 实际圆角vs视觉圆角 如何比圆形更圆?...可以发现右边的按钮有更平滑的圆角,而且视觉效果也更好。 APP 图标也是如此,用标准的圆角是不能达到完美效果的。深入讨论这个话题之前,我们先来看看两个不同的圆形。 ?

    2.5K40

    【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

    , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } 4、版权盒子 整个 版权盒子 版心盒子中 , 设置 左浮动 ; /* 版权所在盒子左浮动...0; } 按钮宽高 120x36 像素 左右上下 各有 1 像素边框 , 各减去 2 像素 最终内存尺寸为 118x34 像素 , 文本 16 像素 , 颜色值 #00a4ff ; 下载...APP 按钮样式 : /* 版权盒子 下载 APP 按钮样式 */ .app { /* 显示模式 - 块级模式 */ display: block; /* 按钮宽高 120x36 像素 左右上下.../* 版权盒子 下载 APP 按钮样式 */ .app { /* 显示模式 - 块级模式 */ display: block; /* 按钮宽高 120x36 像素 左右上下 各有 1 像素边框.../* 版权盒子 下载 APP 按钮样式 */ .app { /* 显示模式 - 块级模式 */ display: block; /* 按钮宽高 120x36 像素 左右上下 各有 1 像素边框

    4.2K30

    Stereo R-CNN based 3D Object Detection for Autonomous Driving

    我们根据图像的深度与三维目标中心的关系,将图像的左感兴趣区域的密集像素向右偏移,找到最大限度减小整个光度误差的最佳中心深度。从而形成了三维目标深度估计的密集约束。...3.2、立体 R-CNN立体回归:立体RPN之后,我们有相应的左右建议对。适当的金字塔水平上,我们分别在左右特征图上应用RoI对齐。...我们还预测了两个边界关键点,它们可以作为规则形状目标实例掩码的简单替代。只有两个边界关键点之间的区域属于当前目标,将用于进一步密集对齐(见第5节)。...我们只解决了使用密集对象patch时三维边界框中心的视差问题,即,我们使用大量的像素测量来解决单个变量。 像素i与3D盒中心深度差异;b是baseline长度。z是我们唯一要解的目标变量。...此外,当我们使用box estimator (section . 4)通过固定对齐深度对整个3D box进行校正时,3D定位和3D检测性能进一步提高了几个点。?

    2.3K20

    【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

    ; 导出的切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子中 , 这两个元素都要垂直居中对齐 , 分别需要单独设置 ; 头像垂直居中对齐...1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42...像素 */ height: 42px; /* 设置颜色 方便调试 */ /*background-color: pink;*/ /* 上下设置 20 像素外边距 , 左右自动居中 */ margin..., 总高度 42 像素 , 有 2 像素的下边框 */ height: 40px; /* 上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距...button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配

    2.5K30

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    设置盒子的尺寸 */ width: 40px; height: 44px; } 4、搜索栏左右两侧的按钮盒子 左侧的按钮所在的盒子 40 x 44 像素大小 , 该按钮盒子通过定位设置..., 尺寸也是 40 x 44 大小 , 该按钮盒子通过定位设置 ; 右侧按钮直接写上 " 登录 " 两个字 , 垂直居中 , 行高 = 内容高度 , 即可设置文字垂直居中 ; css 样式实例 :...像素的 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个 7 像素的外边距 , 会导致外边距塌陷 , 将左右两侧的按钮都带下来 ; 外边距塌陷解决方案是 为 父容器 设置 overflow...*/ height: 30px; /* 白色字体 */ background-color: #fff; /* 上下 0 像素外边距 左右 50 像素外边距 */...*/ width: 30px; /* 默认的图片对齐方式是基线对齐 只要不是基线对齐 这里随便设置 顶部 / 底部 / 中部 对齐都可以 */ vertical-align

    2K30

    【UI 设计】PhotoShop基础工具 -- 移动工具

    ; -- 工具复位 : 右键点击该图标, 就会出现工具复位的选项; (3) 自动选择 自动选择示例解析 :  -- 拷贝图层 : 图层面板中, 选中要复制的图层, 使用 Ctrl + J 快捷键,...: 设置 9 个点的任意一点为旋转中心, 图像可以绕该点旋转; -- 显示图像像素大小 : X 和 Y 表示 图像在 x轴 和 y轴像素的大小; -- 显示比例大小 : W 和 H 显示 宽高的比例;...与 最下面的底端对齐; -- 左对齐 : 与 最左侧像素左边对齐; -- 水平居中对齐 : 最左边的左侧 与 最右边的右侧 中间对齐; -- 右对齐 : 与 最右边的右侧对齐; 分布 :  -- 按顶分布...; 滑动工具 : 与拖动工具类似, 但是只能左右滑动, 不能上下移动; 旋转工具 : 将鼠标移动到 3D 物体上, 旋转光圈即可; 2....解锁图层 : 将第一张图片的图层解锁; 拖动图层 : 使用拖动工具, 直接将图片图层拖动到第一张图片的图层中; (3) 解析自动对齐 自动对齐解析 : 选中所有的图层, 点击自动对齐按钮, 弹出自动对齐对话框

    1.8K40

    手机中的计算摄影3-多摄融合

    根据荣耀官方的数据,彩色黑白融合时,进光量最大提升13%, 清晰度最大提升18%。主摄和广角镜头融合时,中心清晰度最大提升80%, 主摄和长焦镜头融合时,中心清晰度最大提升180%!...尺度对齐 如果我们提前获取到两个摄像头的关键参数,包括焦距、像素尺寸、FOV等信息,那么是能够直接计算出图像的尺度差异的。...像素对齐 要想把这两个空间上有旋转和平移的图像进行像素级别的对齐,至少有两个流派的方法。...那么就比较适合计算它们之间的光流,并用光流信息来对齐每个像素。光流算法回答一个问题:左图中每个像素点Pl右图的对应点Pr的坐标是什么?...它本质上是最小化下面这个代价,其中等式左边是两个图像对应像素的亮度、颜色差异的统计值。

    1.3K20

    详解视觉误差对UI设计的影响和解决方案

    每个人的感官可能都不一样,但对于我来说,调整尺寸后的两个图形看起来才是一样大的,至少也不会像图一一样,让人第一眼就认为正方形比较大。为什么会这样?因为将圆的直径增加了 50px。 ?...抽出几个当做例子,大家看看。 ? 加个粉色等大的边框,或许你会看得更加清楚。 ?...如图所示,我们要让黑色背景与文本对齐,而放置于黑色背景之内的文本要有一定程度的缩进,这样才能达到视觉对齐的效果。 ?...它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文字必须靠左一些才能看起来对齐。 ?...好吧,希望你能够看出来左边那颗按钮是有问题的,实际上画这枚按钮的时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐的方式选错了。

    1.3K10

    CSS垂直居中的七个方法

    ,如果今天的div必须要是block,该怎么让它垂直居中呢?...这时候就必须用到CSS特有的calc动态计算的能力,我们只要让要居中的div的top属性,与上方的距离是“ 50%的外框高度-50%的div高度”,就可以做到垂直居中,至于为什么不用margin-top...position:relative; 宽度:30px; 高度:40px; 背景:#00f; 向左飘浮; top:calc(50%-20px); } 4.使用表格或假装表格 或许有些人会发现,表格这个...转换:translateY(-50%); 背景:#095; } 6.绝对定位 绝对定位就是CSS里头的位置:绝对,利用绝对位置来指定,但垂直居中的做法又和我们正统的绝对位置不太相同,是变为上下左右的数值都设置为....use-flexbox { display:flex; align-items:center; 证明内容:中心; 宽度:200像素; 高度:150px; 边框:1px实线#000; } .use-flexbox

    2.9K30

    像素眼是怎样炼成的

    页面的具体实现过程中,也很容易忽略这里的对齐问题。所以,这里往往是展示你像素眼技能的好地方。 比如下面这张图,底边有 1px 没有对齐,左侧下沉了一点: ?...我们把截图放到 PS 里面看一下,为了清晰,把参考线调成了黑色: ? 可以看到,左侧的销售价三个字的底部已经有 1px 参考线以下了。...所以,如果设计稿就是酱紫,那就永远无法对齐了。 等高元素对齐 等高元素对齐也是很常见的,比如下图这种两个等高的按钮: ?...但是想说的不是这个问题,而是这张图里面的两个按钮,确实在垂直方向上错开了 1px,我们来看放大图: ? 问题已经很明显了,显然,这里也是个重灾区。...你大概就能估计出蓝灰文字中间的间距也就是 5~6px 了,所以你只需要记住几个常见的字号各种设备上的长相,那么你就有了一系列的比例尺了。

    1.3K40

    基于立体R-CNN的3D对象检测

    因为输入是校正后的左右图像,所以可以认为左右对象垂直方向上对齐。 每个左、右目的建议都是通过相同的锚生成的,并且自然而然地,左、右目的建议是相关的。...立体R-CNN 立体声RPN之后,将ROI对齐操作应用于左右特征图。对应于concat的左右ROI功能输入到两个连续的完全连接的层中。...密集3D框对齐 对于左图像中有效ROI区域的每个归一化像素坐标值,图像误差定义为: ? I l,Ir代表左右图像透视图的三通道RGB矢量。和, ?...是像素i和3D边界框中心的深度偏差值,b是基线的长度,只有z是我们需要求解Objective变量的值。 他们使用双线性插值来获取正确图像中的子像素值。...当前的匹配成本定义为覆盖有效ROI区域中所有像素的平方差之和: ? 中心点深度值z可以通过最小化当前匹配成本E来计算。我们可以通过枚举深度值来加快最小化成本的过程。

    1.2K10

    css布局 - 工作中常见的两栏布局案例及分析

    比如下图中学习常用的几个网站 博客园个人中心页 ? 腾讯课堂个人中心页面 ? 腾讯课堂搜索界面 ? 慕课网个人中心页面 ? github个人中心页面 ?...的实现: 觉得左边这里浮动已经形成浮动流,他占据左边220像素的日子也付东流了。所以右边这里没必要再浮动了。可以直接使用padding-left把左边nav占据的220px空出来就行了。...惊悚的是,居然没有找到他的清除浮动。在哪~ 三、类似九宫格布局的两列结构 ? github的实现方法是flex的两端对齐: ?...关键点 父元素ol设置display:flex,并两端对齐。 完了 欢迎去看我整理的九宫格布局的实现方法吧。虽然整理的是一排三列。但是两列也适用。...五、左右两端布局 下边画了三处: ? 这个嵌套结构你看出来了吗?事先没看源码前,一打眼觉得是左边一大块,右边一小块的两端布局。

    2.8K11

    【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

    , 需要 使用绝对定位在父容器中任意摆放 , 包括左右垂直居中的按钮 , 下方的小圆点 ; 子元素需要使用绝对定位 , 那么父容器必须使用相对定位 ; /* 子绝父相 : 整个父容器需要设置相对定位...即可 ; /* 上下设置 100 像素边距 左右水平居中 */ margin: 100px auto; 设置圆角 : 该 Banner 轮播条四个角都是圆角 ; /* 设置圆角 *...overflow: hidden; } 3、左右按钮设置 - 绝对定位垂直居中设置 / 使用圆角矩形设置半圆 / 文字垂直居中 绝对定位垂直居中设置 : 执行下面两个步骤 , 可以将 绝对定位 的子元素设置为...left: 50%; /* 然后 向左走自己的一半宽度 */ margin-left: -35px; 使用圆角矩形设置左右两侧半圆 : 圆角矩形容器高度是 13 像素 , 设置其左右两侧为半圆...overflow: hidden; } /* 并集选择器 将左右按钮中相同的样式提取出来进行设置 代码重构 */ .left, .right { /* 使用绝对定位

    1.8K10

    双目匹配

    在对内参进行标定时,我们已经得到两个相机的旋转矩阵和平移向量,再通过左右相机的内外参数,通过立体标定对左右两幅图像进行立体校准和对齐,最后确定两个相机的相对位置。...、两摄像头光轴平行、左右成像平面共面,这样一幅图像上任意像素点与其另一幅图像上的对应点一定在同一行上,只需要对该行进行一维搜索即可匹配到对应点。...《学习openCV3》里介绍了矫正映射的几种表示方法,不过还不太理解这几个矫正映射和具体图像的对应关系。...首先从几何关系上确定几个定义: 投影中心O_r \ O_l:两个摄像机透镜的中心 投影点P_r \ P_l:三维空间中的点P图像平面中的投影位置。...极点e_r \ e_l:将两个投影中心相连,分别相交图像平面于极点。 极线L_r \ L_l:左右图像投影点和极点的连线。 极面:由两个投影中心/极点和实际点P所成平面。

    2.6K10
    领券