New course! Every coder should learn Generative AI!
Try a free lesson+ 1
Css border alignment(solved)
when I have small border like with display:inline-block. how do I center the whole box to the middle of the page?
4 Answers
+ 5
border: 5px solid black;
margin: 0 auto;
display: table;
Sry I misunderstood at first
+ 4
'align' isn't a valid css attribute ^^
To horizontal centering, you use 'text-align:center;' ( even it's applied to all content of inline type, not just text )
To vertical centering, is less easy... you can use 'Flex' box model ( but I can't help you ), or follow the way suggested by @Patrik Sokol, to use a <table> ( a <td> cell behavior in fact, but you need all the <table> structure to get it ), which is the only element to support real vertical alignement ( else, you could deal with unperfect generic css tips and tricks, which could be enough in some cases ):
<div id="wrapper">
<div id="cell">
Content to be centered...
</div>
</div>
<style>
#wrapper {
display:table; /* get behavior of <table> */
table-layout:fixed; /* avoid size auto relatively to cell content */
}
#cell {
display:table-cell; /* get behavior of <cell>: require <table> as container, but handle valid <row> structured automatically */
vertical-align:middle;
text-align:center;
}
</style>
This structure continue to follow classic rules of Html content: you need probably to specify sizes to your table/cell container, and if using relatives units, you need to take care of the height from parent of your table: without inherited fixed size ( even relative -- means non-auto ), auto-height-sizing to the minimum content requirement is default behavior, so by default, <body> have a "zero" height and grow only if there is content inside.
So, to get a table-like structure getting full ( or at least proportional ) height, setting 'height:100%;' isn't enough to be working. You must force the <body> and its first reference in html document object model <html>:
html, body { height:100%; }
... and often in this kind of case, you also want to desactivate default margin of <body> element :P
+ 1
Example:
h1 {
border: 5px solid black;
display: inline-block;
align: middle;
}
?
+ 1
align: center;
Often have questions like this?
Learn more efficiently, for free:
Hot today
Click to Chat
0 Votes
I need help please!!!
2 Votes
What is the output
0 Votes
What is the meaning of this tag
1 Votes