How do I center horizontally this div displayed as an inline-table? | SoloLearn: Learn to code for FREE!

+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.

css

8/1/2020 12:06:25 PM

Karak10

15 Answers

New Answer

+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.

+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

+3

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

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

+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...

+2

Moved to the look up with similar topics list 😉👍

+1

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

+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.

0

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

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?

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.

0

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

0

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

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?

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.