Search code examples
htmlcssresponsive-designcentering

Centering my items in the middle of the screen

Playing around with CSS and centering items can be a bit of a daunting task. I was looking around with https://www.w3schools.com/ and https://css-tricks.com/ website about centering items. I still find it confusing if you could help me achieve my goal as though I am making a website for myself while learning to code. I know a lot of HTML and CSS, but sometimes as you try to achieve what you envision, it can become quite difficult.

Here is my problem. I have been wanting my profile picture to be on the left column and while a summary text about me on the right column. A lot of people have been telling me to avoid floats so I can understand why and choose to either use flex, grids, or columns.

Recently, I just tried using columns, and so far I like it. Only problem though is that it messed up my nav bar which actually stretched across my desktop and then responsive once in tablet/mobile.

One more thing, as shown in the picture below, I would like my text box be a little bit more center so that it looks good when it is in desktop. Then once you shrink it down to tablet/mobile, I would like my profile picture to stack on top of my text box so that it also looks good when you're scrolling.

NOTE: I put a background color around my two objects so that I can see visually where it is and what the div box is doing. Then later I plan to remove it once I get it finalized.

enter image description here

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;
}

Solution

  • I advise against using columns unless you want your elements to well... be displayed like columns in a newspaper. Not only you can't center anything in columns, but when changing width, the children jump from one column to another which makes it difficult for users to keep track of what's going on (if the reading order matters for your layout).

    In order to center anything on the entire screen, here's what you could use:

    .summary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}
.profileSummary {
  max-width: 400px;
}
@media(max-width: 667px) { /* change breakpoint to what you want */
  .summary {
    flex-direction: column;
  }
}
    <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>

    If you want the two elements to be spaced out evenly, instead of justify-content: center use justify-content: space-evenly. Example, with a wrapper that constraints the width on wider screens:

    .summary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  max-width: 992px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid red;
  flex-grow: 1;
}

.profilePicture, 
.profileSummary {
  padding: 2rem;
}
.profileSummary {
  max-width: 400px;
}
@media(max-width: 667px) { /* change breakpoint to what you want */
  .wrapper {
    flex-direction: column;
  }
}
body {margin: 0;}
* {box-sizing: border-box;}
    <div class="summary">
  <div class="wrapper">
    <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>
</div>