-1

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.

Witek ItDev
  • 1
  • 1
    Welcome to Stack Overflow. Please take the [tour](https://stackoverflow.com/tour) to learn how Stack Overflow works and read [How to Ask](https://stackoverflow.com/questions/how-to-ask) on how to improve the quality of your question. Then check the [help center](https://stackoverflow.com/help/on-topic) to see which questions are on-topic on this site. – Mister Jojo Nov 09 '22 at 03:17
  • could you please provide your desire output? – MrPatel2021 Nov 09 '22 at 04:57
  • You are required to post a [mcve] here, **within your question**, and [not a link](https://meta.stackoverflow.com/a/254430/162698) to any other site. – Rob Nov 09 '22 at 13:20

1 Answers1

0

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:

Boguz
  • 1,600
  • 1
  • 12
  • 25