javascript - 垂直居中对齐文本 - 适用于 chrome，但不适用于 safari

标签 javascript html css

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 7 年前。

Improve this question

请看这个 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)？

最佳答案

为你的 div 使用下面的 css 类

<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/