Я пытаюсь центрировать текст в контейнере по горизонтали и вертикали. Я попробовал это, используя этот класс 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. Есть ли обходной путь?
Ожидал:
Край:
Я использую Microsoft Edge 44.18362.449.0 и Microsoft EdgeHTML 18.18363.
О, хорошо, похоже, у меня очень старая версия Edge? Так что я думаю, что это просто не поддерживалось тогда
Что ж, я рад сообщить вам, что он отлично работает в последней версии 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
Зачем нам нужен transform: translate
? Почему бы не просто position: absolute;
+ top: 30%;
+ left: 10%;
или еще лучше просто transform: translate(10%, 30%);
?
Получилось ли - большой вопрос. Я тоже не очень хорошо понимаю css. Я всего лишь подросток. Кроме того, если вы хотите, чтобы он оставался в том же месте, что и ожидаемая версия, попробуйте настроить числа!
Он должен автоматически рассчитываться без каких-либо настроек, как в решении flex box.
Хорошо, тогда я отредактировал это. Он отображает это так же, как и в ожиданиях.
Он работает в моем системном браузере версии 87 (64-разрядная версия).