javascript - 垂直居中对齐文本-适用于Chrome浏览器，但不适用于 Safari

Closed. This question needs details or clarity。它当前不接受答案。












                            想改善这个问题吗？添加详细信息并通过editing this post阐明问题。

                        3年前关闭。



请参阅此Jsfiddle：
https://jsfiddle.net/cxhm681x/

请在Chrome和Safari上进行检查。

我想垂直对齐OrderNo和Order Name。
在Chrome浏览器中可以正常工作，但在Safari上，OrderNo会与顶部对齐。

这是代码：

<body style="height:100%;">
<div style="width:100%; height:100%; ">

<div  style="height:0%; background-color: black;display: flex;align-items: center;">
    <div style="width:20%;">
    <label id="theNofNx" style="color:#FFFFFF;font-size:small;margin-left:5px;">Order No</label>
    </div>
    <div style="width:80%;align-items:center;text-align:center;margin: 0 auto;">
      <a href="#" target="_blank" style="color:#FFFFFF;text-decoration:none;">Order Name</a>
    </div>
    <div style="width:20%;"><label id="theNofNx" style="color: #FFFFFF;font-size:small;margin-right:5px;text-align:right;"></label></div>
  </div>
</div>
</body>

我也该如何在Safari中使用此功能（适用于Chrome）？

最佳答案

与下面的css类一起去你的div

<style>
.div_parent
{
  display:table;
  height:50px;
  background-color: black;
  text-align:center;
}
.div_child
{
  display:table-cell;
  vertical-align:middle;
  color:#FFFFFF;
  font-size:small;
  margin-left:5px;
  width:20%;
}
</style>

<body>
<div style="width:100%; height:100%; ">
<div class="div_parent">
    <div class="div_child">
    <label id="theNofNx">Order No</label>
    </div>
    <div class="div_child">
      <a href="#" target="_blank" style="color:#FFFFFF;text-decoration:none;">Order Name</a>
    </div>
    <div class="div_child"><label id="theNofNx" style="color: #FFFFFF;font-size:small;margin-right:5px;text-align:right;"></label></div>
  </div>
</div>
</body>

关于javascript - 垂直居中对齐文本-适用于Chrome浏览器，但不适用于 Safari ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37314572/