如何将按钮与h3标记的右侧对齐并使它们保持垂直对齐？
要将按钮与h3标记的右侧对齐并使它们保持垂直对齐，可以使用CSS中的Flexbox布局来实现。以下是一种可能的解决方案：
HTML代码：
<div class="container">
<h3>Title</h3>
<button>Button</button>
</div>CSS代码：
.container {
display: flex;
align-items: center;
justify-content: flex-end;
}
.container h3 {
margin-right: auto;
}解释：
- 将包含按钮和h3标记的容器元素设置为Flexbox布局，通过
display: flex;实现。 - 使用
align-items: center;将按钮和h3标记在垂直方向上保持对齐。 - 使用
justify-content: flex-end;将按钮和h3标记在水平方向上右对齐。 - 通过
margin-right: auto;将h3标记向右推动，使其与按钮对齐。
这样，按钮和h3标记就会在同一行上，并且右对齐并保持垂直对齐。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps
相关·内容
2回答
将<a>对齐到div的右侧
、、、、
如何将包含按钮的<a>元素与字符串Push Me对齐到<div> (<Paper>)的右侧？
应用程序在´demo.tsx`文件中。
注意:我不能将按钮的位置设置为absolute，然后将其定位为right: 0px，因为我需要根据其内容(包括<Button>的高度)调整<div> (<Paper>)的高度。
浏览 11提问于2022-12-02得票数 0
回答已采纳
我有一个包含一些内容的div。它的高度是31px，在它里面，按钮的高度更小。
<div class="headerAndButton">
<h3 class="h3">
Click the button to the right
<button>click me</button>
</h3>
</div>
我还有另一个标题，里面没有按钮。
<div class="headerAndButton">
<
浏览 0提问于2016-07-08得票数 7
3回答
这里是我需要的输出.
HTML标记是：
<h3 class="TRM_Propane_sfty_ttl">Placement of Your Grill & Propane Cylinders</h3>
<h3 class="TRM_Propane_sfty_ttl">Use of Your Grill</h3>
<h3 class="TRM_Propane_sfty_ttl">Other Propane Cylinder Safety Tips</h3&
浏览 5提问于2013-06-06得票数 3
回答已采纳
2回答
需要有关按钮对齐的帮助
、、、
我在垂直对齐一组jquery-ui按钮和控件时遇到了一些问题。它们表示一组选项，如按钮栏：
所需的结果是使所有控件垂直居中。您可以在示例中看到，自动完成(输入和按钮)没有与其他jquery ui按钮对齐。
如果能帮上忙，我们将不胜感激
浏览 0提问于2011-09-18得票数 2
回答已采纳
2回答
我需要一个按钮在右边-对齐在一个<ul data-role="listview" />元素的中间。
这是我所能想到的最好的HTML，但它不是一个精确的拆分按钮，它甚至不会在内容中间对齐……
<ul data-role="listview" data-theme="d" data-divider-theme="d">
<li>
<h3>New York Group Applies for CDFI Status</h3>
<p&
浏览 7提问于2013-09-07得票数 0
我有一个父级垂直线性布局。
在它的4-5左右水平线性布局。在那些活动的左边对齐的一个textView。和一个在活动右侧对齐的微调器。
与之相对应的文本视图和微调工具也是如此。
我正在根据3.5英寸屏幕的手机设置边距。
但它似乎在更大的屏幕上受到干扰。
如何使对齐具有通用性？
浏览 1提问于2014-01-27得票数 0
1回答
我已经研究过类似的问题，并尝试使用显示:表格单元格；内联块；垂直对齐:中间的地方，但我不能让这个工作。在这个 (请看)，它演示了使用‘一个半’和‘第一个’CSS类列的使用。使用DevTools/检查器，您可以在段落前面添加<img src="http://placehold.it/140x240">，如下面所示。也许在“创世纪”的专栏里有什么东西让这件事变得比应该的更难，或者更有可能我忽略了显而易见的事情。
在第一列中，我需要img出现在文本的左边，而文本是垂直对齐的。我似乎找不出能起作用的密码。我知道图像的高度-它不是动态的。我可以用跨度来代替P。
<h3&
浏览 1提问于2014-10-14得票数 0
回答已采纳
假设我有一个GraphViz图：
digraph G {
a->b->d;
c->d;
}
如何使a和c垂直对齐，即显示在相同的高度上？
浏览 3提问于2022-02-03得票数 1
回答已采纳
要明白我的意思，请看一下。(注意:为这个jsFiddle设置了“规范化CSS”选项。)
底线:应用于span和h3元素的相同的CSS指令会产生非常不同的结果(不同的垂直对齐和背景色)。
我希望h3.letter元素的垂直对齐和背景色如span.letter元素所示。
有办法强制将这些指令应用于h3元素吗？
(此外，如果有人能向我指出一些特定的信息，例如W3C文档迷宫中的一个特定段落，使这里描述的行为更容易理解，我将不胜感激。)
顺便说一句，代码是对给定的菜谱的轻微修改。
下面是代码，以安抚SE：
<div>
<span class="letter"
浏览 4提问于2015-05-31得票数 1
回答已采纳
下面是活动链接： 单击create，在保存以获取验证消息(spans)之后，它们垂直对齐的比文本输入高一点
如何使它们垂直对齐与文本输入相同？
浏览 2提问于2010-10-08得票数 1
3回答
我希望有15个按钮之间的等距，并正确引导和跟踪的超级视图垂直。我设置了约束，使左边的按钮集对齐到左边的边距，右边的按钮集对齐到右边的边距。第一个按钮从每组中的顶部边缘引线，其余的按钮每个都对垂直空间集具有到上邻居的约束。我认为这足以让它正常工作，但事实并非如此。可以看到，对于iPhone 4，屏幕上显示的按钮数量只有12个，因此我肯定需要根据屏幕大小动态地更改按钮大小。我是附加一个屏幕截图从故事板，显示Any x Any编辑器视图和预览3.5英寸的屏幕。
浏览 1提问于2015-11-15得票数 6
回答已采纳
2回答
我在一个h3标记中有一个input，两者都在一个li列表中。
我想知道如何垂直对齐输入，这样无论h3文本的大小如何，它都将位于相同的“列”中(每个输入都将位于相同的垂直线中)。实例即使我编辑输入的宽度，它也不会在相同的‘列’中。我试过使用width: calc(..)，但我真的不知道该怎么做。
<ul class="prof-list col-md-4">
<li data-id=" 1">
<h3 class="prof-name">Alan Nai
浏览 0提问于2015-08-19得票数 0
2回答
我试图垂直对齐div与柔性盒，通过使用对齐内容:中心.它在Firefox和IE中运行良好，但在Chrome中不垂直对齐。在Chrome中，div保持在顶部。
<div class="products-wrapper">
<div class="product">
<img src="images/temporary.jpg" alt="Temporary">
<h3>Title</h3>
<p&
浏览 0提问于2018-04-22得票数 2
回答已采纳
3回答
我有两列，其中一列向左浮动，另一列向右浮动。
右边有输入按钮。
由于某种原因，按钮在列的中间，我希望它们垂直对齐，一直到顶部和右边。
我该怎么做？只是玩填充物吗？
<div id="blah">
<div id="left">
<ul><li></li></ul>
</div>
<div id="right"><input type=image src="" /> <input type=image s
浏览 1提问于2010-03-25得票数 0
回答已采纳
1回答
我有一个表视图，它的底部约束设置在工具栏的顶部，但是，有时，当按钮没有必要时，我会隐藏这个工具栏。
如何将我的tableview的底部约束设置为现在成为屏幕sans工具栏的底部？
我是否在故事板中设置了两个底部约束？我是否以编程方式交换这些？
浏览 0提问于2014-08-20得票数 1
回答已采纳
4回答
调整内锚
、、
我希望<div class="status">@Resource.AccordionStatus</div> div与“@itemt.itle”对齐。div当前正垂直地居中。
//Accordion-----------------------------------------------
$(document).ready(function() {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".
浏览 6提问于2017-07-20得票数 1
回答已采纳
1回答
我是SwiftUI和iOS的新手，所以这可能是个愚蠢的问题，但我在任何地方都找不到这个问题的答案。
这是我的密码
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 12) {
Text("Hey there")
Text("How are you ?")
}
.frame(width: 300, height: 300)
}
}
这
浏览 1提问于2021-01-28得票数 1
3回答
给定以下html：
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
浏览 0提问于2013-07-25得票数 2
回答已采纳
请看以下图片：
如您所见，属于复选框的文本正在将相应的复选框推到左侧。我的XML很简单:1 LinearLayout与重力:中心，方向:垂直。您可以看到其他视图是CheckBox和Button。都具有相同的属性(宽度和高度: wrap_content，以及它们之间的一些空白)。
所以我的问题很简单:如何使复选框垂直对齐？
浏览 4提问于2013-10-07得票数 0
回答已采纳
2回答
在一个jQuery移动页面中，我需要一个带有“后退”按钮的标题，一个居中的图像作为页面标题，以及一个右按钮，它是一个方形图像。这两幅图像的高度是一样的。
我很可能通过以下代码获得了我想要的东西：
<div data-role="page">
<div data-role="header">
<a class="ui-btn ui-icon-arrow-l ui-btn-icon-notext"></a>
<img src="http://plac
浏览 1提问于2015-04-17得票数 4
回答已采纳
1回答
我通过引导创建了一个菜单栏，当窗口宽度变小时，导航将变成按钮菜单。当窗口宽度变小时，按下右边的按钮，使其与左边的徽标不对齐。
对于页脚，我使用col-md-6创建了两列，并将text-align: left, text-align: right应用于每一列，因为它们不是放在一边的。现在，当窗口宽度较小时，也会发生同样的情况:将按下右侧的文本/列，而不是将其与左边的文本对齐。
导航和页脚都不能垂直对齐。我尝试在按下的按钮和文本上设置一个负的页边距；我还尝试使用pull-left和pull-right，这也没有什么区别。我也没有媒体查询，但我不确定这是否是一个问题。
下面是一个示例和代码：
任何想
浏览 4提问于2015-10-07得票数 0
回答已采纳
我试图使用RelativeLayout和RadioGroup在安卓系统中创建一个选项卡栏，其中有一个指示符，该指示器可以滑动以指示RadioGroup中的活动RadioButton。
这些是自定义的单选按钮，有效地在文本上带有图标的矩形，以所有内容为中心，使用自定义状态选择器作为背景。
以下是我当前的层次结构：
<RelativeLayout> // Main view of the tab bar
<RadioGroup> // The buttons
<RadioButton />
<RadioBut
浏览 5提问于2011-11-18得票数 6
回答已采纳
我想要一个UILabel，有一个按钮在它的右边，水平居中，就像图片一样。
我已经为标签和按钮之间的UILabel和标准空间实现了一个“按水平中心对齐”，它通常工作得很好。当UILabel的文本很长且超出界限，按钮甚至不可见时，就会出现问题。
我尝试将UILabel的行数设置为0，并设置questionLabel.preferredMaxLayoutWidth = CGRectGetWidth(self.questionLabel.frame)，这使得标签垂直增长。但是它的宽度非常小(这是ui设计器的基本宽度)，所以它看起来像一列文本。
因此，问题是如何使UILabel：
填充所有
浏览 2提问于2016-02-23得票数 0
回答已采纳
我正在做一个响应网站，标准的“技巧”使div内容垂直对齐，因为我的容器是绝对定位的，所以不能工作。
<div class="product">
<div class="prod-info">
<div class="valign">
<h3>Vantage</h3>
<p>Vestibulum luctus laoreet lacus, in viverra metus pharetra sit amet
浏览 1提问于2014-03-31得票数 0
回答已采纳
2回答
我使用的是一个内部包含H3的表。在这个H3里面有一个谷歌搜索栏。现在，谷歌的搜索栏被放在H3的顶部。我怎么才能垂直对齐，使它居中呢？这是我目前所拥有的：
<table>
<tr>
<td id="Vak1.3"><h3>
<script type="">
(function () {
var cx = '013446364428343597193
浏览 2提问于2015-01-23得票数 0
我是iOS编程的新手。我有一个皮肤导航栏有70像素的高度，我想后退按钮和标题是垂直对齐到中间。
我已经看完导航栏的标题了。但我不知道如何将后退按钮垂直对齐到中间。
谢谢。
浏览 2提问于2012-06-28得票数 3
2回答
我正在尝试水平对齐分享，喜欢和推文按钮，但我不能正确的分享按钮。我尝试添加垂直对齐顶部，更改高度和display:inline，但它总是保持10px以下。我应该怎么做才能使它们全部对齐？
<div style='vertical-align: top;'>
<a expr:share_url='data:post.url' name='fb_share'/>
<a class='twitter-share-button' data-count='horizontal' data-
浏览 0提问于2011-01-22得票数 3
回答已采纳
2回答
当我在标题中使用Bootstrap badge时，例如h1，h2，h3，垂直对齐是关闭的。badge与标题文本的底部对齐。我希望徽章与标题文本垂直居中对齐。
HTML
<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class=&
浏览 69提问于2013-10-18得票数 32
回答已采纳
4回答
我对引导行有问题。我的按钮与行文本不垂直对齐。下面是这个问题的一个例子：
<div class="col-md-2 text-right">
<button class="btn btn-lg btn-primary" type="button">A</button>
</div>
<div class="col-md-1 text-center">
<h3>or</h3>
</div>
<div cla
浏览 7提问于2013-11-26得票数 14
回答已采纳
5回答
我正试图调整一些DIVs，但没能成功。
<div class="row">
<div class="name"><h3>Some long name in here</h3></div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
浏览 11提问于2015-07-29得票数 1
回答已采纳
2回答
我有一个UILabel，它的大小由它顶部的视图和底部的视图的距离决定。UILabel的高度通常会根据设备的不同而不同。似乎当自动布局拉伸/压缩UILabel的高度时，其中的文本紧贴在UILabel的顶部，就好像UILabel将文本的垂直对齐设置为顶部一样。如何强制文本垂直居中？
浏览 1提问于2016-08-22得票数 0
2回答
我有一个自定义的UITableViewCell，它有一些子视图。即一些标签，一些图像。我希望所有这些子视图在UITable中都正确对齐。我该怎么做？
我试过这些方法-
1.在InterfaceBuilder中，当我选择UITableViewCell时，我可以设置“缩进”部分。默认情况下是0，我设置为100，但我看不到设备有任何变化。
2.我也在代码中尝试过。覆盖默认方法...
(NSInteger)tableView:(UITableView *)tableView
indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath
{
浏览 0提问于2011-06-16得票数 1
回答已采纳
1回答
我正在尝试构建一个单选按钮，在这个code中，我不能正确地使标签的垂直对齐，我想这是因为我在绝对和相对部分缺少了一些东西，尝试垂直对齐也不起作用。 有没有更好的使用flex的方法呢？ 如果我使用flex，我不能正确地分配输入中的小圆角。
浏览 6提问于2020-06-18得票数 0
回答已采纳
1回答
我有个按钮：
<div id="cta">
<a href="#" class="btn btn-lg">
Who are we?
</a>
</div>
#cta {
margin-left:35%;
position:absolute;
z-index:1;
}
#cta a{
border-radius:100px;
border-color:#FFF;
border-width:thick;
backgrou
浏览 1提问于2014-10-11得票数 0
回答已采纳
3回答
我想让h3文本和输入字段在一行中(h3左对齐，输入右对齐，垂直位置相同)。
我尝试过form-inline类，但它不能按照我想要的方式工作。
代码：
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<h3 class="pull-left">Upcoming Events</h3>
<inpu
浏览 3提问于2015-01-13得票数 3
我有以下简化的HTML代码：
还有CSS代码：
.button {文本对齐:中心；垂直对齐:中间；背景图像: url(button.png)；宽度:120 url；高度:60 url；显示:表格单元格；}
#btback {边距:10汽车10汽车；}
基本上，在div中，有一个标题和一个图片，下面是一个按钮。button.png是没有任何文本的按钮背景图像。因此，我水平和垂直对齐以上的按钮背景文本。
第一个问题是，按钮不能在中心水平对齐。如果我不使用display: table-cell，它可以在中间对齐，但文本不是垂直对齐的。
第二个问题是，可以单击按钮div的整个水平区域(边缘区域)
浏览 3提问于2011-11-25得票数 0
回答已采纳
1回答
无法删除表中的边框间距
、、、
我希望图片和附图中的灰色区域粘合在一起，保持相同的高度--但我似乎无法移除边框间距，这一点正在破坏这一点。
对我做错了什么有什么想法吗？很抱歉那些凌乱的样式表。
PS:我知道这可以被div解决，但这是一个非常特殊的环境。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #efefef;
border: 0px;
margin: 0px;
}
浏览 3提问于2017-02-20得票数 0
回答已采纳
2回答
我正在尝试使“大下拉”菜单显示在导航项目的正下方。我已经为菜单设置了最大宽度，但我似乎无法使它正确地对齐。我更喜欢一个全响应的解决方案&“最干净”的方式来实现这一点，而不必调整所有的小事情。
绿框是我希望下拉的位置是“自然”的位置，下拉是它目前的错误位置，所以理想的解决方案是我添加更多的导航项目，每个下拉分别放在他们的导航项目下。
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle
浏览 1提问于2018-05-30得票数 1
回答已采纳
我需要用相对于父元素的完全高度对齐所有子元素。
一切都很好，直到我使用对齐项: center;属性，我会对齐元素，但它不会覆盖100%，如果我使用对齐-self: Everything；覆盖100%，但不垂直对齐元素，有一些解决方案。
.abouts {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
text-align: c
浏览 0提问于2019-06-05得票数 2
回答已采纳
我需要做的是有点复杂的解释，但我会尽我所能。我需要在一个页面中安装3个不同的div，但我的左div需要比其他div有更多的空间，所以肩并肩对齐是不切实际的，因为在另一个页面上对齐是不切实际的。我需要一个更大的div在左边，另外两个堆叠在一起，在右边。但我不能把这两个div合并成一个，然后浮起来。因为我需要顶部的垂直对齐在左边的顶部，底部的垂直对齐在左边的底部，而这2(上和下)需要在他们的右边对齐。不确定我是否能够解释，因此这里有一幅图像说明了我想要完成的任务：
所以，你看，左边的一个占据了大部分的空间，较小的一个在顶部和底部对齐，同时也对着他们的右边，还有一个空白处。下面是我已经有的
浏览 3提问于2016-06-08得票数 1
回答已采纳
2回答
我正在整理一张简单的表格来存放一定数量的钱。该表单有4个单选按钮。
<form action="deposit.php" method="post"> <fieldset> <div class="form-group"> <input type="radio" name="deposit" value="100"> $100 <br> <
浏览 4提问于2015-07-04得票数 0
回答已采纳
3回答
我使用了一个div作为帮助按钮。使用float将按钮右对齐。
现在，当“popHelp”弹出时，它在左侧对齐。
如何将其在右侧对齐？
** @click="popHelp“隐藏并显示帮助
<div class="help3d">
<div
@click="popHelp">
<span>{{ helpLabel }}</span>
</div>
<div v-if="showHelp" id="popHelp">
{
浏览 0提问于2017-08-15得票数 0
2回答
我所拥有的是一个给定大小的容器和一些<a>标签。这些链接都在一条线上，垂直地居中。现在，我要做的是为<a>标记指定一个高度，这样不仅文本可以点击，而且周围也有一个框。我设法做到了，但不幸的是，我无法使方框中的文本居中。
因此，如果可能的话，我想在不改变html方面的情况下，将文本放在按钮的中间。下面是我当前情况的JSF：
html：
<div id=container>
<div class=nav_list>
<a href="">button</a>
<a
浏览 4提问于2015-10-11得票数 0
回答已采纳
我有点纠结于自动布局。我有我的主视图，上面有两个按钮。我希望将这些按钮放置在垂直中心两侧的相等距离处，如下所示
按钮1|按钮2
但我不确定如何实现这一点？我将两个按钮之间的间距设置为恒定，然后将按钮设置为居中对齐，但这只是将它们重叠在一起，中心线穿过按钮的中间。
我甚至尝试将它们放在一个单独的UIView中:/
浏览 1提问于2014-09-20得票数 0
假设我有一个垂直参考线和该参考线左侧的形状。
当我使用箭头键将形状朝向基准线移动时，形状会跳回到左侧。
我如何防止这种情况发生？
我正在使用Visio Standard 2013。
浏览 21提问于2017-02-16得票数 0
我有一个带有标签文本"+“和"-”的圆形按钮。它没有垂直对齐。
我已经在做了
button.contentVerticalAlignment = UIControlContentVerticalAlignment.center
请帮助它与中心(垂直)对齐。
浏览 0提问于2018-03-26得票数 3
回答已采纳
1回答
我设计了一个小表格，但它不对齐。我试图正确地对齐，但不确定为什么会变得如此混乱。设计的问题是，当我点击加号按钮时，会发生以下情况：
，，蓝色内容的右侧增加，反过来，它增加额外的空间垂直，这是混乱的。我希望蓝色内容在固定的高度。减号按钮需要正确地放置在相应的行旁边。，加号按钮也应该正确地对齐。
有人能帮我解决这个问题吗。
下面是我的代码：
<div class="row">
<div class="col-md-8">
<mat-dialog-content class="mat-typography&
浏览 1提问于2022-09-29得票数 0
我想在点击一个按钮时垂直对齐div中的文本。
我使用的是php和jquery框架库。
这就是我想问的：
例如："myname is xyz“(法线对齐)
垂直对齐
Ex:
m
y
n
a
m
e
....
请指点一下。
浏览 0提问于2013-06-22得票数 2
回答已采纳
13回答
我有一个带有单选按钮的表单，这些按钮与它们的标签在同一行上。然而，单选按钮并不与其标签垂直对齐，如下面的屏幕截图所示。
如何将单选按钮与其标签垂直对齐？
编辑：
下面是html代码：
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type=&
浏览 126提问于2012-11-22得票数 105
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
