Как установить внутренний div в центре и расширяться одинаково сверху и снизу в зависимости от размера содержимого

У меня есть внутренний div с текстовым div., Я пытаюсь сохранить внутренний текстовый div посередине и увеличить размер текстового div одинаково как сверху, так и снизу в зависимости от размера содержимого. Вот мой подход, который я пробовал до сих пор. Могу ли я узнать, какие еще изменения я могу сделать для его достижения.

.outerdiv{
	width:300px;
	height:300px;
	background:#fff;
	border:1px solid;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:absolute;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	height:200px;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class = "outerdiv">
   <div class = "innerdiv">
      <div class = "textcontainer">
         <div class = "textcomponent">
            <h2>This is title section</h2>
            <br/>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
         </div>
      </div>
   </div>
</div>

html css

18.04.2018 14:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете попробовать это, все, что вам нужно, это сделать внутренний контейнер flexbox, как вы это сделали с внешним.

.outerdiv {
  width: 300px;
  height: 300px;
  background: #fff;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 20%;
  left: 35%;
}

.innerdiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: #ccc;
  margin: auto;
}

.textcontainer {
  margin: 10px;
  padding: 10px;
}

.textcomponent {
  border: 1px solid;
  background: #b9a06f;
  color: #fff;
}

<div class = "outerdiv">
  <div class = "innerdiv">
    <div class = "textcontainer">
      <div class = "textcomponent">
        <h2>This is title section</h2>
        <br>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      </div>
    </div>
  </div>
</div>

18.04.2018 14:51

Если я правильно понимаю, вы хотите, чтобы высота регулировалась в зависимости от содержимого. Поэтому я удалил Flex из externaldiv вместе с ограниченной высотой 300 пикселей, я также удалил ограничение высоты из innnerdiv и установил его положение относительно.

.outerdiv{
	width:300px;
	background:#fff;
	border:1px solid;
	display: block;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:relative;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class = "outerdiv">
   <div class = "innerdiv">
      <div class = "textcontainer">
         <div class = "textcomponent">
            <h2>This is title section</h2>
            <br/>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
         </div>
      </div>
   </div>
</div>

Или, если вы намеревались ограничить высоту, вы можете скрыть переполнение в innderdiv:

.outerdiv{
	width:300px;
	height:300px;
	background:#fff;
	border:1px solid;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:absolute;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	height:200px;
    overflow:hidden;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class = "outerdiv">
   <div class = "innerdiv">
      <div class = "textcontainer">
         <div class = "textcomponent">
            <h2>This is title section</h2>
            <br/>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
         </div>
      </div>
   </div>
</div>

Я не хочу удалять высоту, так как это синтаксис (стандартное положение), в котором компоненты, которые я перетаскиваю, могут быть размещены в соответствии с требованиями.

— 19.04.2018 09:10

Попался, я был обеспокоен тем, что переполнение стало слишком большим, когда было добавлено больше текста, и оставление фиксированного размера не упоминалось в вопросе. Не волнуйтесь. Я оставлю ответ, это может помочь кому-то другому.

— 20.04.2018 12:05

18.04.2018 14:58

Вы можете попробовать это:

.outerdiv {
    width: 300px;
    padding: 50px 0;
    background: #fff;
    border: 1px solid;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

.innerdiv {
    width: 200px;
    height: inherit;
    background: #ccc;
    margin: auto;
    height: auto;
}
.textcontainer {
    padding: 10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class = "outerdiv">
   <div class = "innerdiv">
      <div class = "textcontainer">
         <div class = "textcomponent">
            <h2>This is title section</h2>
            <br/>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
         </div>
      </div>
   </div>
</div>

18.04.2018 15:12

Другие вопросы по теме

Изображения не складываются по столбцам в строке в bootstrap 4.0

Измените положение кнопки вверх

Убрать переход и задержку элемента Bootstrap 4 Collapse

Как выделить каждую вторую строку с помощью%?

Обработка вертикальной строки меню для отзывчивых экранов

Как скрыть текст за элементом с фиксированной позицией в HTML

Как удалить курсор dropMenu в Bootsfaces?

Не позволять элементу расширяться по ширине, когда он достигает фиксированной ширины другого элемента

Интерактивное выделение текста и отправка в серверную часть

Элементы HTML падают, когда экран браузера становится меньше

Как установить внутренний div в центре и расширяться одинаково сверху и снизу в зависимости от размера содержимого

Ответы 3

Другие вопросы по теме

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