+ 3

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

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.

1st Aug 2020, 12:06 PM
Karak10
Karak10 - avatar
15 Answers
+ 4
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.
1st Aug 2020, 2:54 PM
JaScript
JaScript - avatar
+ 4
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
1st Aug 2020, 2:12 PM
Karak10
Karak10 - avatar
+ 3
For example: #table { display: flex; flex-direction: row; }
1st Aug 2020, 1:49 PM
JaScript
JaScript - avatar
+ 2
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; }
1st Aug 2020, 1:37 PM
Jayakrishna 🇮🇳
+ 2
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...
1st Aug 2020, 1:57 PM
Sandra Meyer
Sandra Meyer - avatar
+ 2
Moved to the look up with similar topics list 😉👍
1st Aug 2020, 2:19 PM
Sandra Meyer
Sandra Meyer - avatar
+ 1
Is there a reason why you're mixing table-functionality and div-functionality (in description, by naming, probably in usage...)?
1st Aug 2020, 1:43 PM
Sandra Meyer
Sandra Meyer - avatar
+ 1
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.
1st Aug 2020, 1:45 PM
Karak10
Karak10 - avatar
0
Ja Play it does center the div, however, the text isn't anymore aligned vertically to the center.
1st Aug 2020, 1:52 PM
Karak10
Karak10 - avatar
0
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?
1st Aug 2020, 1:52 PM
Sandra Meyer
Sandra Meyer - avatar
0
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.
1st Aug 2020, 1:55 PM
Karak10
Karak10 - avatar
0
Additional container will always work, if you're content with that solution, I'll stop research for a 2 div option? 🙃
1st Aug 2020, 2:16 PM
Sandra Meyer
Sandra Meyer - avatar
0
Sandra Meyer if you want you can continue searching, its good to learn.
1st Aug 2020, 2:18 PM
Karak10
Karak10 - avatar
0
@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?
2nd Aug 2020, 10:29 AM
Karak10
Karak10 - avatar
0
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.
2nd Aug 2020, 10:32 AM
Karak10
Karak10 - avatar