MUI选择variant=“填充”垂直未对齐的文本
MUI是一种前端开发框架，它是Material-UI的简称。Material-UI是一个基于Google的Material Design设计语言的React组件库。在MUI中，variant属性用于指定组件的样式变体，而"填充"是其中一种变体。
当使用variant="填充"时，文本在垂直方向上可能会出现未对齐的情况。这是因为填充变体会在组件的顶部和底部添加额外的填充空间，以增加组件的高度。如果文本内容较少，填充空间可能会导致文本垂直居中对齐时出现偏移。
为了解决这个问题，可以尝试以下几种方法：
- 调整组件的高度：通过增加组件的高度，可以使文本在垂直方向上居中对齐。可以通过CSS样式或者组件的属性来设置高度。
- 使用其他变体：除了"填充"变体，MUI还提供了其他样式变体，如"轮廓"、"文本"等。可以尝试使用其他变体来达到更好的垂直对齐效果。
- 自定义样式：如果以上方法无法满足需求，可以通过自定义样式来调整文本的垂直对齐方式。可以使用MUI提供的样式覆盖机制或者使用CSS-in-JS库来实现自定义样式。
在腾讯云的产品中，与前端开发相关的产品有云开发、云函数、云存储等。这些产品可以帮助开发者快速构建和部署前端应用，并提供丰富的功能和服务。具体产品介绍和链接地址如下：
- 云开发：腾讯云提供的一站式后端云服务，支持前端开发、云函数、数据库、存储等功能。了解更多：云开发产品介绍
- 云函数：腾讯云提供的无服务器函数计算服务，可以用于前端开发中的业务逻辑处理。了解更多：云函数产品介绍
- 云存储：腾讯云提供的对象存储服务，可以用于前端应用中的文件存储和管理。了解更多：云存储产品介绍
以上是关于MUI选择variant="填充"垂直未对齐的文本的答案，希望能对您有所帮助。
相关·内容
将MUI v5 (5.0.4) Select组件与variant='filled'一起使用时，所选项目的文本垂直对齐不正确:它位于底部，而选择箭头图标正确地垂直居中。 ? <Grid
container
direction="column"
style={{ minWidth: "35em", maxWidth: "60em" }}
>
<Typography variant="subtitle1">Appearance</Typography>
浏览 31提问于2021-10-16得票数 1
我正在学习资料-ui v5和它是一个新的造型系统，使用sx，我如何设置一堆不同的元素在同一条线上有相同的高度？
<Mui.Box m={2}
component="form"
sx={12}
md={12}
noValidate
autoComplete="off"
>
<Mui.Card variant="outlined" raised sx={{ p: 2 }}>
<Mui.Grid container
spac
浏览 2提问于2021-11-02得票数 1
回答已采纳
2回答
我想垂直对齐MUI Paper组件中的某些文本。
代码是。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
浏览 5提问于2019-05-28得票数 14
使用react，我有一个MUI多行FieldText，其中有几个inputAdornment图标对齐到右边。
当我填写它时，方框会更改每一行的高度，图标在中间的中垂直居中。
我正在努力使图标保持对齐在顶部，但没有能够。有办法吗？
对不起，我不能提供例子，但我被禁止嵌入图像。希望我的问题是清楚的，并预先感谢您的帮助。
浏览 17提问于2021-12-15得票数 1
我是ReactJS的初学者，我正在使用materia创建一个页面。
我需要在TextField上做一个定制，当输入字段中填充了一些文本时，我想要更改font-size。当我更改字体大小时，在标签和输入字段的边框底部之间有一个非常大的空间。因此，只有当输入字段被填充时，我才需要更改font-size。
你能告诉我怎么做吗？
这是我输入的代码
import React from "react";
import * as S from "./styles";
export default function App() {
return (
<d
浏览 12提问于2022-08-23得票数 2
1回答
我有句话
登录发表评论。
我想为我的部分文本(“登录”)创建超链接，并使用useNavigate或react-router-dom的其他部分将其链接到我前面的另一条路径。现在，我有：
const navigate = useNavigate();
return (
<Typography gutterBottom variant="body1" component="div">
<Link
component="button"
浏览 2提问于2022-03-07得票数 0
我在谷歌上搜索了很多小时以找到解决方案，但似乎很难在桌面上垂直对齐文本。我不明白为什么他们使水平对齐容易，而垂直对齐是那么困难。
<TableCell colSpan={2} align='center' vertical-align='top' >
<Typography variant="h5" gutterBottom >
Task
</Typography>
</TableCell>
浏览 1提问于2019-03-19得票数 12
回答已采纳
我正在使用Shawn Lin的Numberpicker库。它在Github上的链接是： https://github.com/ShawnLin013/NumberPicker 此小部件中的数字显示为： ? 如你所见，数字不是垂直居中的。 我一直在尝试将数字垂直居中对齐，但没有实现。该库允许文本向左、向右或居中对齐(center_horizontal)，但没有垂直居中文本的选项。我试着将“重力”设置为“中心”，但它不起作用。我试着设置填充，但也不起作用。 有没有办法使这个小部件中的文本垂直居中？
浏览 42提问于2020-10-16得票数 0
我一直在尝试在material ui中居中放置纸张组件中的文本，目前什么都不起作用。我尝试在父组件中使用display:flex，在子组件中使用align-items:center，我尝试使用padding5px来获得相等的填充，但它不起作用，并且绝对尝试了text-align和垂直对齐，所有这些都不起作用，如下所示：
我尝试将文本放在底部的三个框中(material-ui中的纸质组件)
浏览 11提问于2021-02-24得票数 0
回答已采纳
1回答
我有这个tsx代码来显示一个文本框和一个图标按钮来添加一些东西：
<TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" />
<IconButton aria-label="delete">
<AddCircleOutlineOutlinedIcon />
</Ic
浏览 8提问于2021-12-05得票数 0
回答已采纳
3回答
我有一个锚元素，如下所示
<a href="url"><img src="imgurl"/>Text</a>
我希望图像和锚元素的文本垂直对齐。我尝试添加垂直对齐(css)，填充，页边距等，但图像不会与文本垂直对齐。
浏览 0提问于2009-09-03得票数 14
回答已采纳
我正在做材料用户界面对菜单组件的反应。我已经将图标映射到菜单项，这反过来创建了li，因为对齐是要抛出的。此外，我想要地图排版与图标和文字。任何帮助都是很好的。谢谢。下面是我的密码。只试了第一排。
import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuI
浏览 4提问于2022-10-11得票数 3
有谁知道如何垂直对齐这些文本元素。我想为不受每个图像尺寸影响的文本定义一个绝对的左侧填充。它非常恼人，如下所示：
非常感谢!
浏览 3提问于2011-08-22得票数 0
回答已采纳
我正试图通过使用MUI TextField创建makestyles的对象来为我的v5组件添加空间。背景颜色是反射在组件中，而不是边缘和填充。这是我的密码
import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { Button } from '@mui/material'
import { ButtonGroup } from '@mui/material'
import { Container } from
浏览 3提问于2021-10-13得票数 2
回答已采纳
1回答
我希望当文本字段处于悬停状态时，然后在边框周围设置文本字段。我不能设置边界。我对材料界面很陌生。有人能帮我吗？怎么能解决呢？这是我的全部密码。
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { styled } from '@mui/material/styles';
const Shipping = () => {
con
浏览 4提问于2022-10-22得票数 0
我正在尝试创建一个简单的CSS菜单。以下是制约因素：
填充父容器宽度的100%
父容器具有基于百分比的宽度。
使每个按钮的宽度相等。
让整个按钮是可点击的(即锚标签扩展到填充整个li标签)
动态生成按钮宽度。
使文本在菜单的中心垂直对齐。
我们可以安全地假设只有3个菜单项。(这将是很好的工作为N个项目，但没有必要)。
以下是html：
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#
浏览 8提问于2013-12-19得票数 0
回答已采纳
1回答
为什么<button>的文本总是垂直对齐而不是..。比方说，使用同样式的锚标记
相同的样式含义都有相同的显示，填充，线条高度，文本对齐和垂直对齐.但是，一旦我将标记从<button>更改为<a>，它就会中断，文本就不再垂直对齐。
这很难弄清楚。我甚至去查看了webkit核心以找到答案。我检查了<button>元素拥有什么，并将其复制出来。
这家伙说<button>的风格不同，但是怎么做？
有人能告诉我浏览器到底是如何呈现<button>的吗？
浏览 5提问于2015-04-27得票数 0
2回答
我想垂直对齐在绿色空间中的文本‘网站名称’。它是div内部的H1文本。绿色背景是文本的背景，黄色背景是div的背景，填充为5px。我无法解决如何垂直对齐文本。我已经试过这个了。
h1 {
text-align: center;
background-color: green;
height: 100%;
vertical-align: middle;
font-size: 25px;
}
浏览 0提问于2017-03-01得票数 0
回答已采纳
我想创建一个(无编号或有项目符号的)项目列表，其中每个项目都有一些与图像相邻的文本。重要的是，文本要垂直对齐到图像的中心，并且要有足够的顶部和底部填充，这样每一对文本和图像都不会垂直重叠。我试着使用这样的东西：
img.floatRight { float: right; margin-bottom: 2px; border: 0px; vertical-align: text-middle}
.myitem { font-size: 12pt; margin-bottom: 50px; margin-top: 130px; vertical-align: middle}
在HTML页面正文中
浏览 0提问于2010-02-15得票数 0
回答已采纳
有没有最好的方法来垂直对齐我的内容？我有3个按钮，我想垂直对齐。
<b-container>
<b-row>
<b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
<b-col><b-button class="main-navigat
浏览 0提问于2020-04-29得票数 3
回答已采纳
当我们想在文本域上悬停时，文本字段中会出现一些黑色边框，如何解决这个问题？
import React, { useState } from "react";
import TextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';
const styles = styled(TextField)({
'*.Mui-focused': {
borderColor: 'transparent'
浏览 1提问于2022-02-14得票数 0
回答已采纳
1回答
我正在使用MUI中的React (@mui/material)，我注意到在一些组件中，文本有点垂直偏离中心。例如，在Chip中
这是很难注意到的，但看看文字怎么没有直接放在中间呢？它看起来与我在MUI文档中找到的芯片示例不同。
这让我很烦，我想看看有没有办法解决这个问题。有什么想法吗？
编辑:我也在使用Bootstrap，但是我禁用了它，并且仍然看到了这个问题。也许它一定要做些什么？我试着调整行重，使其变小，它所做的一切剪掉部分顶部的文字，不会改变对中。如果我检查元素，我会发现文本下面有一个很小的空间(当选择最内部的跨度时)，但是没有边距或填充。
我还看到了MUI按钮的这种轻微偏离。
浏览 3提问于2022-07-29得票数 1
1回答
我想用html：创建一个带有图像的表格
但是图片导致图片底部有一个很大的空格(填充为9px，空格不是填充)，这会导致在右列中的文本顶部出现大量空格：
最终，我希望图像在列中垂直对齐(我看到了很多关于垂直对齐的帖子，但还没有找到解决方案)。
你能帮忙吗？
浏览 3提问于2016-03-23得票数 3
1回答
我有一个高度为60px的选择框。当用户单击一个选项时，我希望该选项文本显示在选择的box...however safari的底部，chrome会自动垂直对齐中间的文本。
我试过增加行高、填充顶部、边距顶部……但这些都不适用于safari/chrome。
请帮助，如果这种类型的样式在“不可能”的safari/chrome。也请让我知道。提前感谢！
浏览 4提问于2010-07-29得票数 1
回答已采纳
嗨，我在我的海军酒吧实现了按钮。这是来自梅.But，在实现它们之后，一切都是静态的，无论我做什么，边距还是填充都不会改变。我试图在他们之间创造一些空间-- Navbar.js
import { useContext } from "react";
import { Cont } from "../Cont";
import "./stylingfolder/Navbar.css";
import { Button } from "@mui/material";
function Navbar(){
const {setUse
浏览 2提问于2022-09-05得票数 0
回答已采纳
3回答
我一直在寻找各种论坛，但没有找到解决我的问题的方法。
我有一段HTML，我在视图中显示，并使用TCPDF将其呈现为PDF。HTML看起来很好，但在TCPDF中似乎不起作用。
下面的表格单元格包含文本(3a-2b)，旁边是图像。对齐应该像在第二个图像中一样。
PDF：
浏览器：
我试过CSS (垂直对齐，高度，线高，边距，填充……)
我找到了这篇文章
但似乎什么都起不到作用。
我知道我可以用整个文本作为图像，但这只是一个例子。
还有别的办法吗？
浏览 0提问于2013-07-23得票数 1
回答已采纳
? 这是我讨论的屏幕，看看两个橙色的编辑文本，它们看起来很奇怪，因为文本本身并不是垂直对齐的，2和30的文本本身没有垂直对齐，正如你看到的，在我的xml中没有填充或任何异常，我试图使重力垂直对齐，但它不起作用，那么我应该做什么来使它垂直对齐 <EditText
android:id="@+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
浏览 14提问于2020-03-25得票数 0
回答已采纳
2回答
我想改变组件的距离(textfield和按钮)，这样它们就不会重叠，但是它们之间有一个空间，我不知道如何做到这一点。
我希望至少在字段文本和按钮之间添加1-2个空格。
以下是它的外观：
代码：
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { Box, Paper, Button} from '@mui/material';
export default function Student() {
c
浏览 1提问于2022-02-22得票数 0
回答已采纳
1回答
我正在使用，我正在创建一个表单，在该表单中有一个组件。
我希望按钮在md屏幕和更高的屏幕上保持其正常的宽度和高度，但希望在xs屏幕上具有完全宽度和一些额外的填充-y。但我想不出是怎么回事？
完整代码：
import "./styles.css";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
export default function App() {
return (
<Grid container spa
浏览 5提问于2022-05-21得票数 0
回答已采纳
3回答
如上图所示，可以使用填充垂直操作选定的文本(在本例中，我使用padding-top: 5px;，但我的客户端拒绝顶部选择，因为select按钮之间有空格(如果您查看示例1的按钮上方，您可以看到空格)
客户希望它是垂直对齐的，在类似于示例2的设计中(抛弃了可怕的空间)，我看了很远很广，但除了做示例1中演示的之外，没有这样的css属性，这显然是不“可接受的”。
这样的属性是否存在？它能跨浏览器兼容吗？
浏览 0提问于2014-01-18得票数 0
有没有什么方法可以格式化一个文本对象，使其粘在一个部分的底部，然后根据填充它的文本的数量，使它向上增长？很像我们与垂直对齐相关联的行为。据我所知，Crystal Reports中不存在垂直对齐:bottom(或类似的)。
有没有办法通过代码、格式化公式或其他方式来实现这一点？
浏览 3提问于2010-07-07得票数 1
回答已采纳
我遇到了这个问题，我在一个MUI网格组件中有几个材料UI卡。我希望这个网格的左侧与上面的标题完全垂直对齐。
我尝试在网格容器上放置一个spacing={2}，但这导致网格项的填充也在左侧，这使得它不再与上面的标题对齐。有没有一种方法可以在不同的网格项目之间简单地在内部填充？
<Box my={2}>
<Typography variant='h6'>
Hoeveel spaart u maandelijks tot uw pensioen?
</Typography>
</Box>
<Grid
浏览 4提问于2021-05-26得票数 0
正如标题所说，我想使用PIL将多行文本居中显示在创建的图像上。我使用了这个代码- https://stackoverflow.com/a/1970942/7286028，但它只使用了中间垂直对齐。然而，我想要垂直和水平对齐。这应该很容易，但它由于填充像素和其他因素而变得复杂。 谢谢你的帮助，路易
浏览 27提问于2019-02-16得票数 0
回答已采纳
我正在尝试使用Bootstrap 3在按钮内垂直对齐一个离子图标和文本。
我希望文本垂直对齐到按钮的中心，图标也垂直对齐。
默认设置似乎是使用图标和文本的最低点对齐。
我的HTML是：
<div class="col-xs-4 text-right">
<a href="/signout" class="btn btn-xs btn-danger sign-out">
<i class="ion-power ion-fw"></i>
<span c
浏览 4提问于2016-04-27得票数 0
我在应用程序中实现了一个Material垂直菜单。在没有垂直滚动条的情况下，它可以正常工作。
但是，当垂直滚动条打开时，垂直菜单会像15 an那样向左弹出布局，在滚动条旁边留下一个不受欢迎的垂直空格。
我使用@梅/材料5.0.6和反应17.0.2
这里是我的垂直菜单代码(灵感来自于mui文档)
import React from "react";
import { Divider, IconButton, ListItemIcon, ListItemText,Menu, MenuItem} from "@mui/material";
import
浏览 10提问于2022-04-05得票数 1
回答已采纳
我喜欢桌子，因为文字对齐在那里很不错。如果我们在<td>中有一个文本，比如<td>Sample Text</td>，不管单元格有多高，文本将垂直对齐在中心。如果单元格中容纳文本的空间较少，则文本将自动重新对齐。
但是，如果我在td内有一个跨度，具有相同的td高度，文本将在顶部对齐。我可以给一个固定的填充内跨度的文本垂直对齐，但在调整大小时，它不会将文本向上拉在单元格内，留下一个永久的顶部填充。
我想要的是使文本在span (在td中)内运行，与在td中的行为完全一样。下面的图片描述了我想说的话；
这里是一个演示，我只想在span中显示文本，以便与t
浏览 9提问于2013-12-29得票数 0
回答已采纳
1回答
在excel工作表中，我想垂直对齐文本，但溢出的文本不会显示。合并单元格和/或扩展行高度不是我的应用程序的选项。
是否有允许显示垂直对齐的溢出文本的设置？
谢谢!
浏览 0提问于2017-11-15得票数 2
1回答
如何在MUI无线按钮上设置标签
、、、、
大家好，我试着在单选按钮上标出标签文本的样式，在选择时更改为蓝色。
，到目前为止，这是我的MUI按钮的代码，
import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl fr
浏览 1提问于2022-07-15得票数 0
回答已采纳
1回答
我正在尝试创建一个具有文本和按钮的可滚动对话框。如果对话框的内容高于滚动视图，我希望所有内容都在视图的顶部对齐。如果所有的内容都可以在没有滚动的情况下适应视口，我希望它在视口的中心对齐。
Img1 :如果内容适合滚动视图，那么内容应该如何垂直对齐。
Img2:如果内容太大，不能全部放在滚动视图中，那么内容应该如何垂直对齐。
这是我画布的结构
Canvas
|
|---Scroll View (contains Scroll Rect component)
|
|---Viewport
| |
| |---Content (cont
浏览 2提问于2016-10-09得票数 0
我有以下HTML和CSS
在火狐，Chrome，Safari和IE9中，文本框有一个左侧填充，文本垂直在中间，但在IE7和8中，文本是在文本框的顶部对齐的，我如何让它像其他浏览器一样垂直在中间？
我不能改变HTML，只能改变CSS。
提前谢谢。
浏览 0提问于2011-10-16得票数 0
回答已采纳
2回答
为什么表格单元格中的图像总是更高，没有任何默认的填充，另一方面，在默认情况下，文本总是略低于默认情况，即使没有边距或空白？
想象一下两列：
| | img |
| txt | |
| | |
| | |
文本总是略低于图像的标记/填充.我如何解决这个问题，使两者完全相同？让我们假设图像有v对齐:顶部，我希望文本和图片垂直对齐(看图片的红线)：
浏览 6提问于2014-06-12得票数 0
1回答
PyQt文本编辑没有默认设置的垂直对齐属性。我想
了解如何在pyqt文本编辑中使用下标和上标
例如，当我使用H20时，我希望2稍微小一点，并且在底部。
浏览 14提问于2017-08-02得票数 0
我正在为一个表使用MUI v5。该表有两列，其中的单元格包含多行TextFields。我希望TextFields完全填充单元格区域。问题是，一旦您开始在一列的文本字段中输入行，另一列中的文本字段的高度将保持不变，它不会填充表单元格。图片： ? 红色是TableCell的backgroundColor，黄色是TextField的backgroundColor。我不想看到任何红色，我希望左列中的文本字段随着右侧文本字段中的数据的添加而增加其高度。 我尝试了不同的CSS组合，高度为100%，位置为100%。我也不能在TableCell上使用flexbox，在输入上使用flexGrow，因为这会
浏览 41提问于2021-11-15得票数 0
回答已采纳
1回答
我读过一些类似问题的答案，但没有完全理解，因为materialUI更新了@mui/样式。
根据mui文档，我们可以使用sx支柱创建自定义样式，例如
<Typography variant="h5" sx={{backgroundColor: 'red' }}>Header</Typography>
但是，当我在v5中使用常规的v5时，它也运行得很好：
//css
.makeRed {
backgroundColor: red
}
// jsx
<Typography variant="h5" classNam
浏览 6提问于2021-12-12得票数 1
回答已采纳
import DesktopDatePicker from "@mui/lab/DesktopDatePicker";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import { Grid, TextField, Button } from "@mui/material";
import { useState } from "
浏览 48提问于2021-11-15得票数 0
我需要上传图像到mongodb数据库与表单。当我用图像填充表单时，图像没有添加到数据库中。除了image之外，其余的详细信息都会传递给数据库。如何解决此问题？我在这里发布了我的代码。有谁能帮我修一下这个吗？我使用了React-file-base64 dependancy。 function ItemForm(props) {
const [details, setDetails] = useState({
topic: "",
description: "",
date: "",
time: ""
浏览 34提问于2021-06-28得票数 0
我正在使用一个项目的材料用户界面，现在我正面临着使用flex的问题。我正在使用material创建卡片，我需要做的是在不对其项目对齐的情况下对父容器进行中心设置。
import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Ca
浏览 0提问于2022-10-25得票数 0
我正在尝试这样做： ? 蓝色是桌面版，红色是移动版。 有3个文本，每个文本容器的长度不应该是父级的，而是文本的宽度(和填充)。 桌面和移动设备的垂直和水平对齐方式不同。 对于桌面，3个文本应该左对齐，垂直居中对齐。对于移动设备，它们应该水平居中，而不是垂直居中。 Here is my code (我使用顺风)： <div className={`w-full h-full ${isMobile ? "bg-red-500" : "bg-blue-400"}`}>
<div
className={`fixed flex fl
浏览 23提问于2021-03-27得票数 1
回答已采纳
我正在努力使HTML/CSS中的文本之间很好地匹配一个图标。
似乎这在display:inline-block;中是可能的。然而，由于幻影填充，这似乎总是出错。
<div style="">
<div style="display:inline-block;">Text here</div><img style="height:24px;display:inline-block" src="{{ url_for('static', filename= 'images
浏览 3提问于2020-11-18得票数 0
回答已采纳
1回答
我用的是MUI材料。
我得到了一个
它在页面的顶部，右边，左边有一个填充。
我希望应用程序栏在最上面的页面。我试过使用类，但它不起作用。
组件/AppBar/index.js
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from
浏览 3提问于2022-07-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
