How do I center horizontally this div displayed as an inline-table?

Question

I want to align the text inside the div vertically to the center, and according to this: ( https://www.sololearn.com/learn/CSS/1091/ ) I can do that by making the div display as a table, which does work, but now I don't know how to horizontally align the whole div ( the blue rectangle ) to the center. Here is my code:
( https://code.sololearn.com/WOnav9b3WgJR/?ref=app ) I tried margin-right: auto; and margin-left: auto; because I read somewhere that this is how I can align tables and divs, but it didn't work.

Answer 1

Karak10 my answer above was an add to your existing code and what you applied after my post. The Flexbox is a modern solution in year 2020.

Answer 2

Sandra Meyer I think I found how, I added the two divs inside a third one with an id="main" and added the styling rules that Ja Play wrote apply to the main div, I'm not sure what exactly the rules do, but it works, check this:
https://code.sololearn.com/Wl0FsDbr909Z/?ref=app

Answer 3

For example:
#table {
display: flex;
flex-direction: row;
}

Answer 4

I tried this way
For table, add:

display: center;

Edit: or working by this also.
#table {

background-color:aqua;
height: 50px;
width: 150px;
margin-left: auto;
margin-right: auto;
}

#table-cell{

text-align:center;
}

Answer 5

This chapter is about aligning tables, not divs. Since they are basically different, they are not to be styled equal. That's why I asked this 😉 I'll make a try, but I need some time...

Answer 6

Moved to the look up with similar topics list 😉👍

Answer 7

Is there a reason why you're mixing table-functionality and div-functionality (in description, by naming, probably in usage...)?

Answer 8

Sandra Meyer I made the table display as a table so I can vertically align the text to the center just like the example in the CSS lesson about vertical-align.

Answer 9

Ja Play it does center the div, however, the text isn't anymore aligned vertically to the center.

Answer 10

Karak10 but why do you call it table, it is a div, it looks like a div, and there is nothing table-like anywhere. There's potential for misunderstandings... Do you refer to the CSS chapter of vertical aligning TABLE CELLS or divs?

Answer 11

Sandra Meyer I want to align the text inside the div vertically to the center, and according to this: ( https://www.sololearn.com/learn/CSS/1091/ ) I can do that by making the div display as a table, which does work, but now I don't know how to horizontally align the whole div ( the blue rectangle ) to the center.

Answer 12

Additional container will always work, if you're content with that solution, I'll stop research for a 2 div option? 🙃

Answer 13

Sandra Meyer if you want you can continue searching, its good to learn.

Answer 14

@Ja Play I searched to understand what flex is and how it works, and it writes that flex-direction: row; makes the divs align horizontally from left to right, so why does it align the div to the center and not to the left?

Answer 15

I don't understand why margin-left and margin-right work when I add the divs between the div with the display: flex; flex-direction: row; rules, but don't work when I don't.