1

#cont {
        position: relative;
        background: red;
        height: 500px;
        width: 500px;
    }
    #ms {
        font-size:20px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
<div id=cont>
        <div id=ms>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
        </div>
</div>

Блок по центру, но если высота габариты его будут меньше содержимого, получится слудующее

#cont {
    position: relative;
    background: red;
    height: 200px;
    width: 200px;
}
#ms {
    font-size:20px;
    position: absolute;
    top:50%;
    left:50%;
        transform: translate(-50%, -50%);
}
<div id=cont>
        <div id=ms>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
            ТекстТекстТекстТекстТекст<br>
        </div>
</div>

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

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

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

Другими словами, сделать дочерний блок блочным и выставить его по центру

1
  • 1
    Это за-за слитного текста 24 июл 2022 в 10:19

2 ответа 2

1

1. Центрирование

Родителя изменить всё равно придётся, иначе трудно добиться нужного результата. Для грамотного позиционирования блоков, как верно отметил @SonOfAMother, хорош flex:

.cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  height: 200px;
  width: 200px;
}

.ms {
  font-size: 20px;
}
<div class="cont">
  <div class="ms">
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
  </div>
</div>

flex - полезнейший инструмент. Советую его как следует изучить:

2. Переполнение контента

В данном случае оно возникает из-за жёстко заданных размеров родителя. Если эта жёсткость так необходима, то можно воспользоваться свойством overflow.

Он принимает несколько значений. Подробнее о них здесь. Я рекомендую в данной ситуации auto:

.cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  height: 200px;
  width: 200px;
}

.ms {
  font-size: 20px;
  font-size: 20px;
  overflow: auto;
}
<div class="cont">
  <div class="ms">
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
ТекстТекстТекстТекстТекст<br />
  </div>
</div>

Если ни одно из свойств overflow вам не подходит, то придётся отказаться от жёстко заданных размеров. Но, как правило, этого вполне хватает.

1

Вы можете решить вопрос с размерами и выравниванием если будете использовать flex или grid контейнеры. Они позволяют подстраивать содержимое под размеры контейнера и наоборот, а также очень просто выравнивать содержимое. Если вы хотите создать адаптивный дизайн, который бы показывался одинаково правильно при любых размерах, то вам обязательно следует познакомиться с вышеуказанными flex и grid, вот хорошие статьи на эти темы (Grid, Flex).

Кроме того, следует отказаться от использования абсолютных величин по типу px (пиксели), pt (кегли) и т.п., лучше использовать относительные по типу % (процент от родительской величины), em (множитель стандартного размера шрифта) и т.п.

Это общие рекомендации, при необходимости могу сделать пример конкретно для вашего документа.

Ваш ответ

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

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