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

css border

1st Mar 2017, 1:39 PM

Pablo Emilio Vives Millán

4 Answers

+ 5

border: 5px solid black; margin: 0 auto; display: table; Sry I misunderstood at first

1st Mar 2017, 2:28 PM

Patrik Sokol

+ 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

2nd Mar 2017, 8:21 AM

visph