Question

请看这个Jsfiddle： https://jsfiddle.net/cxhm681x/

请在Chrome和Safari上查看此内容。

我想垂直居中对齐OrderNo和订单名称。这在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中工作）？

Answer 1

使用以下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>

Answer 2

尝试display：table方法，代码应该是这样的

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

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

希望这有帮助

保重和快乐编码

垂直居中对齐文本 - 在chrome中工作，但在safari中不工作

2 个答案: