React Bootstrap:行列的垂直对齐? [英] React Bootstrap: Vertical alignment of row's columns?

问题描述

我正在使用react bootstrap，我试图在一行中垂直对齐项目，但是没有运气.我的问题是我在其中一列中有一个按钮，因此对于其他列，所有文本都向上移了一点，而按钮及其内容的高度较大.我的问题是如何使一行中的所有列都具有相同的高度并使所有列垂直居中对齐?到目前为止，我设法找到的唯一解决方案是使用CSS:转化:translateY(-50％)这可以解决问题，但是我一直在寻找一种更好的动态解决方案，因为除了按钮列之外，该列都需要应用于所有列

当我说列和行时，我是在谈论引导程序的Col和Row，实际上不是表或行和列；抱歉造成误会

解决方案

如果您使用表行，则可以将内容包装在< div> ..</div>

喜欢:

 < tr>< div classname ="align-me"></div></tr> 

然后可以使用flexbox动态对齐它们:

  tr .align-me {显示:flex;align-items:居中;} 

I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other columns all the texts are shifted up a bit while the button and its content have a larger height. My question is how can I make all columns within a row to have the same height and to all align in the middle vertically? The only solution I managed to find so far is using CSS: tranform: translateY(-50%) this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column

EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding

解决方案

If you are using table rows, you can wrap contents within a <div>..</div>

like:

<tr>
  <div classname="align-me"></div>
</tr>

and then you can use flexbox to align them dynamically:

tr .align-me {
  display: flex;
  align-items: center;
}

这篇关于React Bootstrap:行列的垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！