首页
学习
活动
专区
工具
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

53820

【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.5K20

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

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

    2.5K40

    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】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

    , 浏览器中居中对齐 */ .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

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

    设置盒子的尺寸 */ 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

    【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

    详解视觉误差对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

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

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

    2.8K11

    基于立体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】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )

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

    1.8K10

    【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

    -- 顶部的标题 --> 的课程表 <!...1200 像素 , 浏览器中居中对齐 */ .w { width: 1200px; margin: auto; } /* 头部盒子样式 */ .header { /* 高度 42..., 总高度 42 像素 , 有 2 像素的下边框 */ height: 40px; /* 上下内边距 0 像素 , 左右内边距 10 像素 */ padding: 0 10px; /* 右外边距...button { /* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配...像素 */ font-size: 16px; /* 设置文字颜色 */ color: #00a4ff; /* 水平对齐 */ text-align: center; /* 垂直对齐 - 行高

    4.3K40
    领券