Question

我有这种情况：

<div id="main">
    <div id="my-items">
        <div class=m id="id1">
            Smth here(1)
        </div>

        <div class=m id="id2">
            Smth here(2)
        </div>

        <div class=m id="id3">
            Smth here(2)
        </div>
        ...
    </div>
</div>

我没有确定div的数量（div的子代（div的子代））
我想垂直对齐文本（在他的div（第一个文本-＃id1，第二个文本-＃id2 ...））！我尝试使用vertical-align: middle;。请创建一个jsfiddle或codepen示例！

CSS：

.m{
height:32px;
width:90px;
text-align: center;
}
#my-items{
max-height:400px;
width:90px;
text-align:center;
}

I created a very simple schematic paint 3d

Answer 1

我试图尽可能匹配图像。希望您可以获取代码并根据需要进行修改。如果这不是您想要的解决方案，我深表歉意。

P.S。我在CSS中添加了一条注释，以向您展示一种垂直定位内容的方式。

#my-items{
  padding: 10px;
  border: 3px solid black;
  max-height: 400px;
  width: 90px;
  text-align: center;
}

.m{
  height:32px;
  width: 100%;
  text-align: center;
  border: 3px solid black;
  
  /* This is one way of vertially aligning content */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div id="main">
  <div id="my-items">
      <div class=m id="id1">
          Smth here(1)
      </div>

      <div class=m id="id2">
          Smth here(2)
      </div>

      <div class=m id="id3">
          Smth here(2)
      </div>
  </div>
</div>

Answer 2

以您的＃my-items样式尝试此操作

position: absolute;
top: 50%;

如何将div中的文本居中

2 个答案: