I've encountered an issue where setting a width to a div with the display: table-cell property is not working as expected.
Here is my code:
<header class="header layers">
<div class="wrap">
<h1 id="title"><?php echo $blogtitle;?></h1>
</div>
</header>
And here is the CSS I used:
.layers {
position: absolute;
display: table;
top: 0;
left: 0;
overflow: hidden;
box-sizing: border-box;
table-layout: fixed;
}
.wrap {
height: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
display: table-cell;
vertical-align: middle;
width: 1040px;
}
.header {
height: 80px;
width: 100%;
}
#title {
font-size: 30px;
color: black;
font-family: 'Roboto', sans-serif;
}
I have used this approach successfully before, but for some reason it's not working this time. When inspecting the element, the width of the wrap class is being set to 100% without any errors showing up.
If anyone has any insights or suggestions, please do share. Your help is much appreciated.
You can also view the fiddle link here.