Jasper Jasper - 6 months ago 19
HTML Question

Vertically Center align text - works in chrome, but not on safari

Please see this Jsfiddle:
https://jsfiddle.net/cxhm681x/

Please check this on Chrome and Safari.

I want to vertically centre align OrderNo and Order Name.
This works fine in Chrome, but on Safari, OrderNo is aligned to the top.

Here's the code:

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


How do i make this work for Safari as well (works in chrome)?

Answer

go with below css class for your 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>
Comments