Вопросы Теги

Как вертикально выравнивать с чувствительными div (нет высоты / ширины)?

Это потому, что суперкласс не имеет этого метода.

Если вы хотите, чтобы суперкласс мог вызвать метод, вам нужно сделать его абстрактным и дать ему этот метод.

Подкласс является формой суперкласса, суперкласс не является формой подкласса.

1
задан Pete 13 July 2018 в 08:53
поделиться

2 ответа

Вы можете использовать flexbox для этого - я прокомментировал css ниже: 

* {
  box-sizing: border-box;
}

.container {
  display: flex;           
  flex-direction: row;   /* align children in rows */
  flex-wrap: wrap;       /* allow wrapping of children for multiple rows */
  width: 50%;            /* change to width you want */
  margin: 0 auto;      

  border-left: 5px solid black;
  border-bottom: 5px solid black;
}

.container>div {
  border-right: 5px solid black;
  border-top: 5px solid black;
  padding:20px;
  
  display:flex;          /* make children flex too for centering */
  
  align-items:center;    /* vertical center */
  justify-content:center; /* horizontal center */

}

.left-col {
  width: 30%;
}

.right-col {
  width: 70%;
}
<div class="container">

  <div class="left-col">
    top left content over multiple lines
  </div>

  <div class="right-col">
    top right
  </div>

  <div class="left-col">
    bottom left content over multiple lines
  </div>

  <div class="right-col">
    bottom right
  </div>

</div>

0
ответ дан Pete 17 August 2018 в 13:19
поделиться
  • 1
    Ух ты ! Это так здорово, я серьезно подумываю о том, чтобы взять настоящие классы! Огромное спасибо :) – OneMinute 13 July 2018 в 09:03
  • 2
    Пожалуйста, если вы хотите узнать больше о flex, , это хороший код – Pete 13 July 2018 в 09:04
  • 3
    Это фантастика! Еще раз спасибо и отлично провели день! – OneMinute 13 July 2018 в 09:13

Сетка + Flex 

html, body {
     margin: 0;
     height: 100% 
}
 .grid-container * {
     border: 1px solid #ccc;
}
 .grid-container div {
     display: flex;
     justify-content: center;
     align-items: center 
}
 .grid-container div:after {
     content: attr(class);
     color: #888;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     font-family: arial;
}
 .grid-container {
     display: grid;
     height: 100%;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-template-areas: '. .' '. .';
}
<div class='grid-container'>
	<div>Text Slider</div>
	<div>Grid-cuisine</div>
	<div>Grid Produits</div>
	<div>Text-produits</div>
</div>

0
ответ дан Nagy István 17 August 2018 в 13:19
поделиться
  • 1
    Большое спасибо! Я сейчас изучаю это. Вы все сделали мой день! – OneMinute 13 July 2018 в 09:18
Другие вопросы по тегам:

Похожие вопросы: