How to center the text vertically and horizontally without losing the inline-block property?

Question

I am just learning CSS and would like to ask for help. I can center the text vertically and horizontally but at the expense of the inline-block property. So my question is: how to center the text vertically and horizontally without losing the inline-block property in the .aboutme-trio__section element ?

https://codepen.io/WitekItDev/pen/bGKgemp

I am just starting out, please bear with me.

I have tried these methods: https://www.w3.org/Style/Examples/007/center.en.html

The result? Everything comes crashing down.

Answer 1

To center the content inside your .aboutme-introduction__section element you can add the following:

.aboutme-introduction__section {
    // your other styles for the section plus:
    display: flex;
    flex-direction-column;
    align-items: center;
    justify-content: center;
}

• The display: flex make the element a flex container, which allows you to easily center the elements inside it
• the flex-direction: column tell the element to stack the elements vertically instead of placing then horizontally side-by-side
• align-items: center centers the children items on the cross-axis
• justify-content: center center the children items on the main-axis

Then you get:

.aboutme-introduction__background {
  background-color: aqua;
  width: 90%;
  height: 80%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 10px;
}

.aboutme-introduction__section {
  position: relative;
  height: 250px;
  padding: 20px;
  margin-bottom: 10px;
  background-color: rgb(173, 169, 206);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="aboutme-introduction">
  <div class="aboutme-introduction__background">
    <div class="aboutme-introduction__section">
      <div class="aboutme-introduction__photo"></div>
      <div class="aboutme-introduction__title">O MNIE</div>
      <div class="aboutme-introduction__description">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et illum rerum aliquid corporis, obcaecati ipsam doloribus harum labore nisi ad temporibus dolorem voluptate esse maxime illo eius. Nobis, minima laudantium.
      </div>
    </div>
  </div>
</div>

Here is some good information about it on MDN:

• How to align items on a flex container
• flex
• flex-direction
• align-items
• justify-content