CSS: Cannot horizontally center by using margin
Question
I have tried to using margin: 0 auto; to horizontally center the div elements however I don't understand why the items are always appearing on the left of the HTML page.
body { background: #f06d06; font-size: 80%; } main { display: inline-block; background: white; line-height: 300px; height: 300px; margin: 20px auto; width: 300px; resize: vertical; overflow: auto; vertical-align: middle; } div { display: inline-block; vertical-align: middle; height: 100px; line-height: 100px; background-color: black; padding: 50px; margin: 0 auto; } p { display: inline-block; vertical-align: middle; color: white; margin: 0; line-height: 1.5; }
<body> <main> <div> <p>center align</p> </div> </main> </body>
Could anyone tell me what I am doing wrong?
4 answers
solution1
0 2021-12-19 03:30:12
set text-align:center to main.
main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}
solution2
0 2021-12-19 03:45:05
Try This, I Changed div display properties
body { background: #f06d06; font-size: 80%; } main { display: inline-block; background: white; line-height: 300px; height: 300px; margin: 20px auto; width: 300px; resize: vertical; overflow: auto; vertical-align: middle; } div { display: block; vertical-align: middle; height: 100px; width: 100px; line-height: 100px; background-color: black; padding: 50px; margin: 0 auto; } p { display: inline-block; vertical-align: middle; color: white; margin: 0; line-height: 1.5; }
<body> <main> <div> <p>center align</p> </div> </main> </body>
solution3
0 2021-12-19 04:09:04
body { background: #f06d06; font-size: 80%; } main { display: block; background: white; line-height: 300px; height: 300px; margin: 20px auto; width: 300px; resize: vertical; overflow: auto; vertical-align: middle; } div { display: block; vertical-align: middle; height: 100px; width: 100px; line-height: 100px; background-color: black; padding: 50px; margin: 0 auto; } p { display: block; vertical-align: middle; color: white; margin: 0; line-height: 1.5; }
<body> <main> <div> <p>Center div</p> </div> </main> </body>
Okay, let me explain what is happening over here, you in your post add display inline-block which I changed to block, which means that a particular element main will take up the whole horizontal space, and when you use margin: auto it automatically gives equal margin to both sides, it is working on your code but the thing is you haven't specified the width to the max.
So, whenever you want to center the element using margin: auto , you need to specify the width as 100vh or 100% (if parent div has 100vh )
solution4
0 2021-12-19 04:16:31
You have to implement a flexbox or Grid to achieve vertical and horizontal centering! Here I little update on you code
body { background: #f06d06; font-size: 80%; } main { display: block; background: white; line-height: 300px; height: 300px; margin: 20px auto; width: 300px; resize: vertical; overflow: auto; vertical-align: middle; margin:auto; overflow:hidden; } div { display: inline-block; vertical-align: middle; height: 100px; line-height: 100px; background-color: black; margin: 0 auto; text-align:center; width:100%; } p { display: inline-block; vertical-align: middle; color: white; margin: 0; line-height: 1.5; text-align:center; }
<body> <main> <div> <p>center align</p> </div> </main> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.