What's the reason why this isn't in the middle?

I added all the right code that is supposed to center it in the middle.

After you click on one of the bottom links it’ll open in a new window where you’ll see it’s not in the middle.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000000;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

button {
  font-size: 22px;
  cursor: pointer;
  background: green;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

.info {
  float: right;
}

input[type=text] {
  font-size: 22px;
  color: #0059dd;
  width: 200px;
  border: 1px solid #0059dd;
  background: #000000;
  font-family: "Times New Roman", Times, serif;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  padding-top: 1px;
  padding-bottom: 1px;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

button:focus {
  outline: 0;
}

input:focus {
  outline: 0;
}

.wrape {
  position: relative;
  width: 520px;
  height: 174px;
  overflow: hidden;
  background: #000000;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.wrape .nav li a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 4px 0;
  color: transparent;
  background: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .nav li:nth-of-type(n+10) a {
  margin: 0 4px 0 0;
}

.link {
  fill: #0059dd;
}


<div class="outer">
  <div class="tcell">

    <audio autoplay id="player"></audio>
    
     <div>
      <button id="button">Play / Pause</button>

      <div class="info">

        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" />
      </div> </div>
   


    <a class="twitter-timeline" data-width="520" data-height="280" data-dnt="true" data-theme="dark" data-chrome="transparent noheader nofooter" data-link-color="#4180ab" data-border-color="#0059dd" href="https://twitter.com/Twitter/lists/interests-on-twitter"></a>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    <div class="wrape">
      <ul class="nav">
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>

        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
      </ul>

    </div>

  </div>
</div>

What is “it*”?

The structure as a whole.

There’s way more space on the bottom than the top.

It’s not being centered in the middle properly.

This is the center in the middle code.


html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000000;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}


<div class="outer">
  <div class="tcell">


  </div>
</div>

After adding a doctype and head section to the page AND balancing the tags, it seems to be vertically centered in the browser window to me in older versions of Chrome and FF.

How much of a centering “error” do you see and in which browsers?

39 Top

109 Bottom

They should be equal to each other as close as possible.

What happens if you delete the fixed height?

That’s a question, not a “fix”.

.wrape {
    background: #000000 none repeat scroll 0 0;
    height: 174px;  /* delete me */
    overflow: hidden;
    position: relative;
    width: 520px;
}
1 Like

74 Top

74 Bottom

It seems that fixed heights show up rather often as part or all of the problems that you report.

Let me ask you to perform another test.

Restore the fixed height that you just deleted and ADD an outline to the .wrape box.

.wrape {
    background: #000000 none repeat scroll 0 0;
    height: 174px;  /* RESTORE Me. */
    outline: 1px dashed yellow;  /* ADD Me */
    overflow: hidden;
    position: relative;
    width: 520px;
}

The yellow outline should show you WHERE the extra height is being added.

Now delete the fixed height again and see what happens when the extra height is discarded.

1 Like

Even though height isn’t needed, the height was set wrong, that’s why it wasn’t being centered properly.

This would’ve been the correct height:

.wrape {
  position: relative;
  width: 520px;
  height: 104px;
  overflow: hidden;
  background: #000000;
}

Well, as often as fixed heights have been found to cause problems, I was hoping that you would realize that allowing boxes to “go with the flow” rather than forcing them to fit into a fixed box is usually the better design choice (yes, there can be exceptions such as images that need to resize.).

In any event, please do remember to use outlines to help solve layout size problems. They can be very handy.

smile

4 Likes

Stop using magic numbers for height when none is needed.

You’ve been told this countless times as Ron explained above.:slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.