Setting px width for table-cell

Question

I am giving a width to a div with display table cell property but it is not working .

My code is

<header class="header layers">
        <div class="wrap">
            <h1 id="title"><?php echo $blogtitle;?></h1>
        </div>
</header>

And the css is

.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;
}

But i don't know why it is not working this time i have used it many time with no problem . When i see the width of the wrap class in inspect element it is setting it to 100% with no error . Please help . Appreciate any anwser and comment .

The fiddle link is this https://jsfiddle.net/yashag/zhsxLhzj/

Why not use `display: inline-block`? That will allow you to set a width. — Jonathan Lam, Jan 20 '16 at 03:04
Perhaps see [this answer](http://stackoverflow.com/a/21130851/2397327)? — Jonathan Lam, Jan 20 '16 at 03:05
i want the h1 to float in the middle that why i set display table-cell — Yash Agarwal, Jan 20 '16 at 03:06
That's what [`display: flex`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is for. — Jonathan Lam, Jan 20 '16 at 03:07
Yes. You can still [vertically-align](http://stackoverflow.com/questions/34809954/vertical-align-flexbox-vs-table-table-cell-on-elements-with-unknown-height), *and* you can [do more with it](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). — Jonathan Lam, Jan 20 '16 at 03:10
@JonathanLam but flex isn't widely supported as far as I know. If you have to support old browsers. — Loïc Faure-Lacroix, Jan 20 '16 at 03:15
@LoïcFaure-Lacroix That was not a requirement. Anyways, [many modern browsers support it](http://caniuse.com/#feat=flexbox). — Jonathan Lam, Jan 20 '16 at 03:16
Then flex is a nice thing to play with! Yet on one project I had, I felt strange behaviour on different browsers (safari,chrome,firefox). Like mouse clicks not which would return strange mouseX, mouseY. — Loïc Faure-Lacroix, Jan 20 '16 at 03:19

Jonathan Lam · Accepted Answer · 2016-01-20T03:18:44.070

0

As requested in the comments, here is an example of using display: flex (flexbox) to vertically-align text (as you were trying to do with display: table-cell). You can also specify width and height of a flexbox easily, like a normal block element.

As you can see, the display:flex element correctly vertically-centers the text, and can be set to a 1040px width correctly.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
div#container {
  display: flex;
  align-items: center;
  height: 100%;
  width: 1040px;
}
div#centered {
  height: 20px;
  width: 100%;
  text-align: center;
}

<div id="container">
  <div id="centered">Vertically-centered using <code>display: flex</code>.</div>
</div>

edited Jan 20 '16 at 03:18

answered Jan 20 '16 at 03:17

Jonathan Lam

16,831
17
68
94

Thanks @Jonathan Lam You are great – Yash Agarwal Jan 20 '16 at 03:17
@YashAgarwal No problem! I'm glad I helped! – Jonathan Lam Jan 20 '16 at 03:18

Setting px width for table-cell

1 Answers1