如何垂直对齐一个较小的材质浮动按钮？
垂直对齐一个较小的材质浮动按钮可以通过以下步骤实现：
- 使用CSS设置按钮的样式：首先，为按钮添加一个类或ID，并使用CSS设置按钮的样式，包括背景颜色、边框、圆角等。例如：
.button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
position: fixed;
bottom: 20px;
right: 20px;
}- 使用CSS设置按钮的垂直对齐方式：为了垂直对齐按钮，可以使用CSS的flexbox布局或者使用绝对定位。以下是两种常用的方法：
- 使用flexbox布局：将按钮的父容器设置为flex布局，并使用
align-items: center;将按钮垂直居中。例如：
.container {
display: flex;
align-items: center;
}- 使用绝对定位：将按钮的父容器设置为相对定位，并使用
top: 50%; transform: translateY(-50%);将按钮垂直居中。例如：
.container {
position: relative;
}
.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}- 在HTML中添加按钮：在合适的位置添加按钮的HTML代码，并将按钮放置在垂直对齐的容器中。例如：
<div class="container">
<!-- 其他内容 -->
<button class="button">按钮</button>
</div>以上是垂直对齐一个较小的材质浮动按钮的基本步骤。根据具体的应用场景和需求，可以根据需要进行样式和布局的调整。
相关·内容
1回答
我有以下代码来创建一些浮动按钮： <div class='history-buttons__container'>
<button mat-mini-fab>all</button因为这些元素是垂直堆叠在diplay: block中的，所以我不能使用vertical-align。如何在缩小图标的同时使项目内的文本居中？
浏览 15提问于2021-07-31得票数 0
回答已采纳
我要把一个简单的导航栏放在一起。height: 3em;然后，我希望我的一些链接在一个更大的字体大小。，我注意到在元素上面和下面有一些小的带，这些元素被垂直地稍微偏移。我创建了一个JSFiddle 来演示这个问题。我怀疑我可以用一个浮动:左和一个清晰解决这个问题，但我想听到‘正确’的方式解决它。总之，我在这里试图实现的是具有相同高度但不同字体大小的<
浏览 3提问于2014-10-07得票数 2
回答已采纳
我想在表格单元格中放置一个文本和按钮。按钮需要右对齐。如果我对按钮应用了float:right样式，垂直对齐就会变差。有什么帮助吗？这是不带浮动的jsfiddle :对，垂直对齐在这里很好：
下面是应用了float:right的jsfiddle：
浏览 0提问于2012-08-29得票数 1
回答已采纳
2回答
我正在创建一个包含各种字段的基本表单。我想使用UIStackView来布局所有控件。如何执行以下操作以使控件正确地对齐？UIStackView是正确的方法吗？
浏览 4提问于2015-10-07得票数 8
回答已采纳
源代码：我遇到的问题是，下一个按钮和以前的按钮不是垂直在较小的屏幕上居中。下面是它如何看待完整的尺寸：
下面是屏幕尺寸变小时的样子：
如何使下一
浏览 1提问于2014-04-14得票数 1
回答已采纳
我在使用不同于表格单元格本身的字体大小的跨度的“中间”垂直对齐时遇到问题。：使用float:right在单元格中右对齐unit跨度，并使用vertical-align:middle设置整个单元格的样式。unit类使用较小</em
浏览 0提问于2014-11-03得票数 0
1回答
我正在尝试从一个链接列表创建一个分页导航元素。页码应居中对齐，上一页/下一页按钮应分别浮动到父元素的左边缘和右边缘。
当使用display:inline-block时，页码边距仍然有效，但“上一页”/“下一页”按钮不再浮动不用求助于疯狂的位置:
浏览 2提问于2013-06-04得票数 0
回答已采纳
3回答
我有两列，其中一列向左浮动，另一列向右浮动。由于某种原因，按钮在列的中间，我希望它们垂直对齐，一直到顶部和右边。</div>
<div id="right"><input type=image src="" /> <input type=image src="&qu
浏览 1提问于2010-03-25得票数 0
回答已采纳
5回答
我只是不能让align-right类的按钮在中间垂直对齐。如果我将header-footer-item从inline-block更改为inline，则浮动按钮呈现在其包含的元素之上，我认为这违反了规则：(在可接受的答案( )中的#4)--尽管父元素随后垂直对齐在中间我还想知道为什么使子元素(按钮)向右浮动会使父元素( span)不再在包含的div
浏览 6提问于2017-02-09得票数 19
回答已采纳
2回答
我正在尝试将一个按钮对齐到角材质卡的右边，如 <span>Hello</span> <button mat-button>Edit</button>
&l
浏览 2提问于2019-09-23得票数 0
回答已采纳
1回答
我有一个CSS和HTML相关的问题。我有一个主要的div，它有一个背景颜色，应该是可见的。在其中，我有一个包含多个较小div的包装器。这些孩子中只有一个一次可以放入更大的div中，但我希望其他孩子在它旁边与滚动条垂直对齐，这样我就可以在div之间滚动。我不想让我的主div之外的div可见并扩展站点。我试着让它们向左浮动<
浏览 0提问于2013-01-04得票数 1
回答已采纳
我有一个带有FontSize=20的Silverlight3的单选按钮。相对于文本/内容，图像显得太高。这对于较小的文本尺寸并不明显，但是对于较大的文本尺寸，文本/内容和对话框图像之间的垂直对齐看起来很丑陋。关于如何在文本和对话框图像中垂直对齐= dialog有什么想法吗？
ty
浏览 2提问于2009-11-01得票数 3
回答已采纳
3回答
我试图在bootstrap列中实现类似这样的东西(我不太关心样式，而是对齐方式)：基本上，到目前为止，我尝试的是：<div class: 15px; line-height: 45px; background: #66fbd1;此外，我还应用了较小的行高： l
浏览 1提问于2017-12-27得票数 1
我有一个5列的表，所有的列都是垂直对齐的:中间。前4列仅由在单元格中间垂直对齐的文本组成。前四列格式很好；但是，最后一个单元格由两个div组成。第一个是向左浮动的文本，第二个是向右浮动的按钮。下面是最后一个单元格的html： <td>
<div styl
浏览 0提问于2017-07-25得票数 1
回答已采纳
这是用于在父元素中垂直对齐元素的标准代码：
<img src="http://cdn.flaticon.com/png/256/60510.png" />content: ""; height: 100%;}
它工作正常，但当我想用向
浏览 2提问于2015-01-06得票数 0
回答已采纳
7回答
"> <span class="number">2</span></div>但是，如果我移除浮动:右，则左div垂直对齐：
请帮助我如何使垂
浏览 0提问于2014-01-05得票数 1
8回答
我知道要将文本垂直对齐到块的中间，需要将行高设置为与块的高度相同。我如何设置它，使两种大小的文本垂直对齐</em
浏览 1提问于2010-10-22得票数 97
回答已采纳
看看下面的例子： <div id='a'></div></td>示例：()使用其中一个输入文本，并查看autocompleter的脚注。我想要得到类似的效果，但两个“列”垂直</e
浏览 0提问于2012-01-10得票数 0
9回答
CSS垂直对齐
、、
我在浮动的div中有一个img，我不知道如何将它垂直居中。<div style="height: 300px"></div>
垂直对齐:中间对齐当然不起作用。
浏览 3提问于2011-01-25得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
