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