使用flex将图标与文本水平对齐

文章/答案/技术大牛

发布

1回答

html、css、flexbox

难以将我的图标与标题水平对齐(标题上方50% /下方50%)-下面可能没有完全指出问题，因为添加了红色填充，但我使用的图标顶部和底部有一点额外的空间，所以它看起来就像坐在下面一样。将StyledComponents与React一起使用，但下面的代码片段复制了该问题。

浏览 45提问于2021-09-21得票数 0

回答已采纳

3回答

CSS:使用文本定位图标级别

html、css、flexbox

我有以下样式，它们实现了“图标”与“主要文本”水平水平坐的预期效果-然而，我希望我的“主要文本”有一个12px的间距来“项目一”。目前12px从图标的底部开始，比标题大。谁能建议如何保持图标与标题的水平，同时能够定义之间的标题和项目之间的间距？ MAIN TEXT </div>

浏览 22提问于2021-10-06得票数 1

回答已采纳

5回答

将字体图标与导航栏中的文本垂直对齐

html、css、twitter-bootstrap、font-awesome

我试图垂直对齐一个字体图标与导航栏中的一些文本从引导。导航条的垂直大小设置为10vh。我无法使文本与图标对齐，如下图所示：另外，我想在图标和文本之间添加一些水平空间。class="navbar-nav nav-fill w-100"> <a

浏览 8提问于2020-07-18得票数 0

回答已采纳

4回答

我正在创建一个标题，理想情况下，我希望标题在左边，肚脐图标在右边。我可以使用设置为dislay: flex的父div和justify-content: space-between来实现这一点，如下所示。但是，i不能在此实例中应用垂直对齐来将文本和图标水平地集中对齐。我想我可以用边距来让它看起来正确，但不确定这是否是最好的方法。另一方面，我可以使用display: inline-block来做类似的事情，然而，我对如何

浏览 2提问于2021-05-06得票数 0

回答已采纳

1回答

如何将垂直元素对齐为水平元素，并使用CSS向屏幕的右侧移动？

css

我正在工作一个插件，需要对齐一些社会按钮的右侧使用CSS。但是，按钮不是显示在一行(水平)中，而是垂直显示。这是密码。

浏览 5提问于2016-05-11得票数 1

回答已采纳

5回答

在JMenu中以文本为中心

java、swing、jmenu

我希望所有的菜单文本都以他们的菜单按钮为中心。当我使用setHorizontalTextPosition(JMenu.CENTER)时，没有变化。事实上，不管我使用的常量如何，菜单文本仍然是左对齐的。*更新1 还是没有运气。(int)和setVerticalAlignment(int)设置了JMenu中文本和图标的对齐方式。当与图标一起使用时，文本定位方法似乎像广

浏览 4提问于2012-07-30得票数 3

2回答

如何使用flexbox将文本与图像水平对齐？

html、css

我尝试将文本与文本两边的三个垂直对齐的图像水平对齐。但是，当我将"display:flex;“应用于三个div的父元素时，它会将三个div的对齐方式从垂直更改为水平，更改图像的大小，并导致第一个div和文本之间出现空白，而不是将所有div都推到屏幕的左侧font-size: 18px; width: 35em;

浏览 22提问于2019-04-19得票数 0

回答已采纳

4回答

文本旁边的位置图标

html、css、angular、mat-icon

目前的情况如下：我需要像这样的图标在文本旁边(图标需要显示在文本的左边，而不移动文本，这样标题仍然与电话号码一致)：代码：<h3><mat-icon sv

浏览 3提问于2021-01-26得票数 0

回答已采纳

1回答

FlexBox:左上角对齐图标，并在图标后面保持相同的间距。

html、css、flexbox、font-awesome

它们是水平的和垂直的中心对齐。这通常是在一个实时网站上呈现的。然而，我需要对齐字体可怕的图标与文字以这样的方式: 1)。所有图标都在左角对齐。因此，这表明图标没有正确对齐。代码： display: -ms-flexbox; -ms-flex-wrap: wr

浏览 0提问于2018-06-13得票数 1

回答已采纳

1回答

如何在IOS设备中垂直对齐图标？

ios、react-native

我想在TouchableHighlight in IOS应用程序中对齐react中的这个选项图标--原生，但是当我实现它时，它不是使用属性，因为它是的唯一属性。我怎样才能得到在android和IOS中都能使用的替代方案呢？

浏览 1提问于2018-11-23得票数 0

3回答

如何使用flex对齐左边的图标和中心的文本？

html、css、flexbox

我知道现在flex很有用，我也很喜欢使用flex。当将图标放在左边时，如何对齐文本的中心？ transform:translateX(0); transit

浏览 7提问于2017-04-21得票数 3

回答已采纳

3回答

React Native flex-box对齐图标和文本

icons、react-native、flexbox

在react native应用程序中，我使用'react-native-vector-icons/MaterialIcons'。我没有flex: 1。代码已更新。style={styles.buttonText}>My Button

浏览 5提问于2016-04-04得票数 21

1回答

无法与多行文本对齐

nebular

我正在尝试将一个警告三角形图标与多行文本对齐。文本和图标都应该左对齐。This is what I am trying to do This is what I am able to do 这是我使用的一段代码： <nb-alert outline="basic" style="display: flex; justify-content: flex-start;

浏览 11提问于2020-09-01得票数 0

3回答

jquery ui-图标和文本对齐

css、jquery-ui

我尝试将jquery ui-icons与下面的文本对齐，但我注意到图标总是比文本高一点。有没有一种方法可以将它们水平完美地对齐？

浏览 0提问于2010-09-11得票数 0

回答已采纳

1回答

如何将文本定位到浮动图像的左下角？

html、css

我试图在div的右下角定位一个图像/图标，并将文本环绕在它周围。我使用了这个的提示，使图像在正确的位置。但是，我现在很难把文本放到div的底部。这可能是一个简单的解决方案，我忽略了。提前感谢！ width: 200px; padding: 30px; display: flex; display: inline; dis

浏览 2提问于2021-12-22得票数 1

2回答