Установочная прокладка внутри родительского элемента для вертикального центрирования

#html #css

Вопрос:

Я думаю, что в основном я там. У меня есть DIV на 200 пикселей в высоту и внутренний на 150 пикселей. Это оставляет мне 50 пикселей для подписи к изображению. Затем я хочу вертикально центрировать текст в пределах оставшихся 50 пикселей.

 .captioned {
  width: 300px;
  height: 200px;
  display: flex;
  margin: 10px;
  background-color: #FFFFFF;
  border: solid 4px #000000;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.captioned-inner {
  width: 100%;
  margin: 0;
}

.preview {
  height: 150px;
  width: 100%;
}

.preview-image {
  height: 100px;
  max-width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
}

.info {
  padding: 5px;
  box-sizing: border-box;
  height: 50px;
}

.info-inner {
  box-sizing: border-box;
}

.name {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

 <div class="captioned">
   <div class="captioned-inner">
      <div class="preview" style="background-color: #DE16C7 !important">
         <img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </div>
      <div class="info">
         <div class="info-inner">
            <p class="name">Google</p>
         </div>
      </div>
   </div>
</div>

Я надеюсь, что код имеет смысл для того, чего я пытаюсь достичь. Мне интересно, как я могу включить заполнение на высоте 50 пикселей, если только я не должен вертикально центрировать и заполнять текст, но это кажется худшим способом сделать это.

1. Не используйте отступы для центрирования элементов….есть гораздо лучшие способы, включая flexbox.

2. Я не использую отступы для центрирования, отступы предназначены для основного внешнего поля, чтобы текст не касался краев. Фактическое изображение всегда имеет одинаковую высоту, поэтому для этого достаточно полей @Paulie_D

3. @learningtoanimate я отредактировал его снова, это будет работать для вас, сохраняя высоту 200 пикселей, как вы упоминали ранее

4. Я протестирую его сегодня, просто работая и над другими элементами @Ac_mmi

Ответ №1:

Просто используйте display:flex и align-items:center для выравнивания текста по вертикали

Также, как вы указали box-sizing:border-box в .captioned классе, чтобы он также включал границу в высоту 200 пикселей, что означает

height of the container top border bottom border=200px

таким образом, высота .preview контейнера должна быть 150px - top border(i.e 4px)=146px , и для .inner контейнера она будет 50-4 =46px ;

Это сработает для вас.

 .captioned {
  width: 300px;
  height: 200px;
  display: flex;
  margin: 10px;
  background-color: #FFFFFF;
  border: solid 4px #000000;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.captioned-inner {
  width: 100%;
  margin: 0;
}

.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 146px;
  width: 100%;
}

.preview-image {
  height: 100px;
  max-width: 100%;
}

.info {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 46px;
}

.info-inner {
  box-sizing: border-box;
}

.name {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

 <div class="captioned">
  <div class="captioned-inner">
    <div class="preview" style="background-color: #DE16C7 !important">
      <img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </div>
    <div class="info">
      <div class="info-inner">
        <p class="name">Google</p>
      </div>
    </div>
  </div>
</div>