jquery - 仅在 android 默认浏览器中出现设计中断

Question

我在 div 中有一个 div，当我在 android 默认浏览器中查看它时，它的设计中断了，不能，因为我没有工具来查看导致此问题的原因。休息它适用于所有浏览器。

<div class="row">                
    <h2 >PRAYER </h2>
    <div class="time-wrapper">
        <div class="pt-circle">
            <div class="pt-time">
                <b>Fajr</b><br> 
                <span id="ContentPlaceHolder1_lblFajrTime">04:58</span>
            </div>
        </div>                  
        <div class="pt-circle">
            <div class="pt-time">
                 <b>Dhur</b><br>
                 <span id="ContentPlaceHolder1_lblDhurTime">12:08</span>
            </div>
        </div>
        <div class="pt-circle">
            <div class="pt-time">
                <b>Asr</b><br>
                <span id="ContentPlaceHolder1_lblAsrTime">15:28</span>
            </div>
        </div>
        <div class="pt-circle">
            <div class="pt-time">
                <b>Magrib</b><br>
                <span id="ContentPlaceHolder1_lblMagribTime">17:52</span>
            </div>
        </div>
        <div class="pt-circle">
            <div class="pt-time">
                 <b>Isha</b><br>
                 <span id="ContentPlaceHolder1_lblIshaTime">19:22</span>
            </div>
        </div>
    </div>
</div>

<div class="pt-time"> div 应垂直和水平居中对齐。

CodePen link

Answer 1

解决方案

.pt-time{position: relative;  padding:0; margin:0; top: 25%;  text-align:center; }

我删除了 transform: translateY(-50%); 并更改了 top:25%;

translateY(-50%); 应该没有。