Край - не могу центрировать текст по горизонтали и вертикали

Я пытаюсь центрировать текст в контейнере по горизонтали и вертикали. Я попробовал это, используя этот класс css:

.centerVH{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

Он отлично работает в Chrome и Firefox, но не работает в браузере Edge.

 @media all{
   
    html {
         font-size: 62.5%;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         font-size-adjust: 100%;
    }
     #header_cart {
         width: 180px;
    }

    .uppercase{
      text-transform:"uppercase";
    }
    .centerVH{
      display:flex;
      justify-content:center;
      align-items:center;
      text-align:center;
    }

    .minicart-wrapper .action.showcart{
      display:contents;
    }
   
     #header_cart{
        font-size:1rem;
        -webkit-display:grid;
        -moz-display:grid;
        -ms-display:grid;
        display:grid;
        grid-template-columns:0% 1fr;
        float:unset;
    }
     #header_cart i{
        color:#39464f;
    }
    
     #mini-wk{
        border:1px solid #f37b22;
        color:#f37b22;
        margin-top:2.5px;
        height:42px;
        background:white;
        position:relative;
    }
    
     .minicart-wrapper:before,.minicart-wrapper:after{
        content:'';
        display:table;
    }

     #minicart_row{
        display:grid;
        grid-template-columns:70% 1fr;
        grid-template-rows:1fr;
        grid-column-gap:0px;
        grid-row-gap:0px;
    }
     #minicart_row #minicart_col_a{
        grid-area:1 / 1 / 2 / 2;
    }
     #minicart_row #minicart_col_b{
        grid-area:1 / 2 / 2 / 3;
    }
     #minicart_cart_text{
        font-family:"Montserrat";
        font-weight:600;
        font-size:13px;
        color:#ff7712!important;
        text-transform:uppercase;
    }
     #minicart_quote_circle{
        color:#ff7712!important;
    }
     #minicart_quote_count{
        transform:scale(0.75);
    }
     #minicart_quote_count_number{
        font-family:"Montserrat";
        font-weight:600;
        color:white !important;
        font-size:18px;
    }
}

/*! CSS Used from: https://use.fontawesome.com/releases/v5.14.0/css/all.css ;
 media=all */
 @media all{
     .fas{
        display:inline-block;
        font-style:normal;
        font-variant:normal;
        text-rendering:auto;
        line-height:1;
    }
     .fa-2x{
        font-size:2em;
    }
     .fa-stack{
        display:inline-block;
        height:2em;
        line-height:2em;
        position:relative;
        vertical-align:middle;
        width:2.5em;
    }
     .fa-stack-1x,.fa-stack-2x{
        left:0;
        position:absolute;
        text-align:center;
        width:100%;
    }
     .fa-stack-1x{
        line-height:inherit;
    }
     .fa-stack-2x{
        font-size:2em;
    }
     .fa-circle:before{
        content:"\f111";
    }
     .fas{
        font-family:"Font Awesome 5 Free";
    }
     .fas{
        font-weight:900;
    }
}
/*! CSS Used fontfaces */

 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gTD_u50.woff2) format('woff2');
    unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3g3D_u50.woff2) format('woff2');
    unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gbD_u50.woff2) format('woff2');
    unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gfD_u50.woff2) format('woff2');
    unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face{
    font-family:'Montserrat';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_bZF3gnD_g.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 @font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    font-display:block;
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.eot#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-regular-400.svg#fontawesome) format("svg");
}
 @font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    font-display:block;
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot);
    src:url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.eot#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.14.0/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}
<div id = "header_cart" class = "minicart-wrapper">
    <div id = "mini-wk">
        <div id = "minicart_row">

            <div id = "minicart_col_a" class = "action showcart icon">
                <span id = "minicart_cart_text" class = "centerVH uppercase"> Warenkorb</span>
            </div>

            <div id = "minicart_col_b" data-bind = "scope: 'minicart_content'">
                <span id = "minicart_quote_count" class = "fa-stack fa-2x">
                  <i id = "minicart_quote_circle" class = "fas fa-circle fa-stack-2x"></i>
                  <i id = "minicart_quote_count_number" class = "fas fa-stack-1x" data-bind = "html: getCartParam('summary_count')">0</i>
                </span>
            </div>
        </div>
    </div>
</div>

Я не могу понять, как заставить его работать в Edge. Есть ли обходной путь?

Ожидал:

Край:

jsfiddle

Я использую Microsoft Edge 44.18362.449.0 и Microsoft EdgeHTML 18.18363.

Он работает в моем системном браузере версии 87 (64-разрядная версия).

Abhishek 15.12.2020 12:17

О, хорошо, похоже, у меня очень старая версия Edge? Так что я думаю, что это просто не поддерживалось тогда

Black 15.12.2020 12:20
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
497
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Что ж, я рад сообщить вам, что он отлично работает в последней версии Edge. Может у тебя просто старая версия? А может вам просто нужно очистить кеш, нажмите эту комбинацию для быстрой очистки кеша ctrl + shift + delete.

Ваш код, похоже, работает в Edge. Если это по какой-то причине не работает для вас, почему бы вам не использовать:

position: absolute; /*Or you can use fixed*/
top: 50%;
left: 35%;
transform: translate(-50%, -50%);

Вот он в скрипте js. https://jsfiddle.net/hgw6uv8k/1/ Пробовал на многих устройствах. Это работает одинаково для всех из них.

Я попробовал и получил странный результат: jsfiddle.net/q5sfrgtL

Black 15.12.2020 15:18

Зачем нам нужен transform: translate? Почему бы не просто position: absolute; + top: 30%; + left: 10%; или еще лучше просто transform: translate(10%, 30%);?

Black 15.12.2020 15:33

Получилось ли - большой вопрос. Я тоже не очень хорошо понимаю css. Я всего лишь подросток. Кроме того, если вы хотите, чтобы он оставался в том же месте, что и ожидаемая версия, попробуйте настроить числа!

Avinav Chalise 15.12.2020 15:35

Он должен автоматически рассчитываться без каких-либо настроек, как в решении flex box.

Black 15.12.2020 15:39

Хорошо, тогда я отредактировал это. Он отображает это так же, как и в ожиданиях.

Avinav Chalise 15.12.2020 16:38

Другие вопросы по теме