elepil
asked on
How to make a <div> with display: inline-block center on the browser horizontally?
Earlier, I needed a <div> that 'hugged' the elements inside it instead of expanding to the width of the browser. I was advised to set the <div>'s display property to inline-block, and that did the trick.
But after doing that, it no longer would center on the browser. Is there a way I can have a <div> hug its child elements and still be center-able inside the browser?
Thanks.
But after doing that, it no longer would center on the browser. Is there a way I can have a <div> hug its child elements and still be center-able inside the browser?
<html>
<head>
<style>
html {
min-width: 300px;
height: 100%;
}
#testDiv {
margin: 0 auto;
display: inline-block; // If you took this out, it will center again
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="testDiv"></div>
</body>
</html>Thanks.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No, it's been around since the beginning of time I believe, just under utilised :)
ASKER