как сделать текст(название) ссылки находились по середине

Question

как сделать чтобы цифры находились по середине https://jsfiddle.net/1zuy5pvn/5/

.strip-pages{
    position:relative;
    overflow: hidden;
}
.page{
    position: relative;
    text-decoration: none;
    color: white;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
}
.block-page{
    position: relative;
    width: 14vw;
    height: 10vw;
    background: #690101;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

<div class="strip-pages">
<div class="block-page"><a href="<URL>" class="page">1</a></div>
<div class="block-page"><a href="<URL>" class="page">2</a></div>
</div>

Answer 1

Для выравнивания ссылки по вертикали используйте display: flex; align-items: center;. Для выравнивания текста внутри самой ссылки - text-align: center;

.block-page {
  display: flex;
  align-items: center;
  width: 14vw;
  height: 10vw;
  background: #690101;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.page {
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: white;
}

<div class="strip-pages">
  <div class="block-page"><a href="<URL>" class="page">1</a></div>
  <div class="block-page"><a href="<URL>" class="page">2</a></div>
</div>

Answer 2

Попробуй добавить к уже имеющемуся коду эти три строки (для выравнивания):

.block-page{
    display: flex; 
    justify-content: center; 
    align-items: center;
}

А здесь убрать высоту и ширину (чтобы выравнивание сработало):

.page{
    /*width: 100%;
    height: 100%;*/
}

БЛОГ НА HUSL

как сделать текст(название) ссылки находились по середине

Ответы (2 шт):