1

Есть масштабируемый шаблон. Есть блок Grid, который должен полностью быть кликабельной ссылкой. В этом блоке я хочу расположить ровно по центру текст так, чтобы при изменении размера окна браузера текст масштабировался возле этого центра и не выходил за рамки Grid. Проблема: 1). Текст масштабируется по середине горизонтальной строке и в верхней части вертикальной. 2). При большом разрешении текст выезжает за пределы блока, а при слишком маленьком разрешении - текст становится очень маленьким и занимает 1/6 блока.

Решил эту проблему, просто задав блоку фоновую картинку в виде text.png с прозрачным слоем. Там и масштабируется все легко, и кликабельная область настраивается просто. Но хочется все же решить вопрос с помощью кода.

1 ответ 1

0

Только что занимался этим вопросом. Не знаю насколько правильно решил. У грида задал колонки и высоту строки. Элементам сказал расширяться по вертикали до полной высоты строки.

Внутрь вставил еще один div - Flexbox в котором провел центрирование силами Flexbox. Я хотел чтобы элементы были прямоугольниками, выставленными по сетке, заполненными фоном внутри которых располагался центрированный текст. Только свойствами css grid добиться этого мне не удалось.

body {
  box-sizing: border-box;
  --gap_size : 40px;
  --gap_size2 : -20px;
}

.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   grid-auto-rows: 200px;
   grid-gap: var(--gap_size);
   position: relative;
  align-items : center;
  margin : 50px;
  
}

.box2 {
  align-self : stretch;
  background:lightgrey;
  position : relative;
}


.flex {
    display: flex;
    justify-content: center; /*Центрирование по горизонтали*/
    align-items: center;     /*Центрирование по вертикали */
    height : 100%;
    text-align : center;
    border : 1px solid green;
    margin : 0  var(--gap_size2 );
}



div {border : 1px solid red;}
<div class="wrapper">
  <div class="box2"><div class="flex">One</div></div>
   <div class="box2">
     <div class="flex">
        Two  является центром
     </div>
  </div>
   <div class="box2">
     <div class="flex">
        Этот блок 
     </div>    
   </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.