Html 将按钮垂直居中放置在另一个div中自己的div中

我目前正试图将按钮与“.行”的其余部分垂直居中

这是我目前拥有的。我尝试过将style=“vertical align:center；”添加到不同的元素中，但按钮不会移动。我找到的唯一解决办法是用类似“top:100px；”的东西将它们向下移动但这当然不是一个有效的解决方案，因为它不适用于所有屏幕大小

这些按钮位于它们自己的div（.col.s3）中，这有助于它们在.row上水平定向。此处的目标是将两个外部按钮垂直居中于中间组（.col.s6）

有没有办法轻松地将这些元素垂直居中

检查此处的示例：

按钮
一个
两个
三
四
五
六
七

首先，您需要在包含

.btn

类的

div

中放置一个

id

命名后，可以使用css技巧中的技巧垂直对齐：

如果您想了解有关此主题的更多信息，请访问：

---

您将无法使用浮点元素，因为它们不遵循垂直对齐

使用显示：内联块；相反，这样元素就可以垂直对齐

请注意内联块元素之间的空白

您可以将外部元素级别的字体大小更改为（0），然后将字体大小设置回元素内部

.row { font-size:0px;}
.row .col { font-size:12px;}

---

Fiddle

首先，我们需要你的css来真正帮助我们。其次，您可以尝试使用

%

而不是

px

将它们向下移动，这将解决屏幕大小问题。通常，当适应不同的屏幕尺寸时，所有

宽度
css设置都应以百分比为单位。例如
宽度：17.3%我已经检查了发布的两个线程，它们都不是这个特定问题的解决方案。现在，没有CSS应用于页面。如果您复制并粘贴代码，它应该按照我现在看到的方式运行。而且
%
根本不移动元素。使用类似于
style=“bottom:-100px；”“
的方法可以工作，但不能使用
style=“bottom:-50%”“
正面或负面css应用于此页面。检查你的脑袋。也可以看看这篇文章，试试看。把它放在小提琴或片段中。这让那些想帮助你的人变得更容易。这个解决方案似乎不起作用。啊，是的，有CSS，但我正在从materialize导入所有样式。。。我没有自己编写的CSS样式。我在页面上添加了一个小提琴链接，谢谢你的提示
.div_containing_btn {
  position: relative;
}
.btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.row { font-size:0px;}
.row .col { font-size:12px;}