Игра с помощью CSS и центрирование элементов может быть сложной задачей.Я искал с https://www.w3schools.com/ и https://css -tricks.com / веб-сайт о центрирующих элементах .Я все еще смущаюсь, если вы поможете мне достичь моей цели, как будто я делаю сайт для себя, пока учусь программировать.Я знаю много HTML и CSS, но иногда, когда вы пытаетесь достичь того, что представляете, это может стать довольно трудным.
Вот моя проблема.Я хотел, чтобы моя фотография была в левом столбце, а в правом столбце - краткий текст обо мне.Многие люди советуют мне избегать операций с плавающей запятой, чтобы я мог понять, почему и решил использовать flex, сетки или столбцы.
Недавно я только что попробовал использовать столбцы, и пока мне это нравится.Единственная проблема заключается в том, что он испортил мою навигационную панель, которая фактически растягивалась на моем рабочем столе, а затем реагировала один раз на планшете / мобильном телефоне.
Еще одна вещь, как показано на рисунке ниже, я хотел бы, чтобы мое текстовое поле былонемного больше центра, чтобы он выглядел хорошо, когда он находится на рабочем столе.Затем, когда вы уменьшите его до планшета / мобильного устройства, я бы хотел, чтобы изображение моего профиля располагалось поверх моего текстового поля, чтобы оно также выглядело хорошо при прокрутке.
ПРИМЕЧАНИЕ: Я накладываю фоновый цвет вокруг своих двух объектов, чтобы я мог визуально видеть, где он находится и что делает блок div.Затем я планирую удалить его, как только получу окончательный вариант.
HTML
<span>
<div class="summary">
<div class="profilePicture" style="background-color: lightgreen;">
<img src="https://i.imgur.com/TKo40kR.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="profileSummary" style="font-size: 18px; background-color: lightblue;">
Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
</div>
</div>
</span>
CSS
html, body {
margin: 0;
}
body {
display: table;
width: 100%;
}
body>span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.summary {
/* Creates two columns */
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
margin: auto; /* Begin Centering */
width: 60%;
padding: 300px 0;
text-align: center;
}
.profilePicture {
display: block;
margin-left: auto;
margin-right: auto;
}