Geek Answers Handbook

Table-cell element does not accept max-width

Following this answer , I tried to vertically center my header elements, however, I am having problems because there is a container element between them that ensures that they are contained within a certain max-width and centered. I applied display: table-cell to this element, and now its max-width does not work (occupies the entire width of the screen, regardless of its max-width ). How to solve this problem?

Markup:

 <header class="banner"> <div class="container"> <a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>"> <img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" /> </a> <nav class="nav_primary"> <?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?> </nav> </div> </header>

CSS

 .banner { height: 160px; width: 100%; display: table; background: url(../images/header.jpg) 50% 50% repeat-x; } .container { max-width: 1500px; margin-left: auto; margin-right: auto; overflow: hidden; vertical-align: middle; display: table-cell; } .header__branding { float: left; width: 150px; height: 52px; display: block; } .nav_primary { float: right; }
+6
source share
4 answers

Here is the exact answer to your question. I will leave the old version as an alternative.

Problem

From CSS 2.2 Specification :

In CSS 2.2, the effects of "min-width" and "max-width" on tables, embedded tables, table cells, table columns, and undefined column groups.

So it looks like there is currently no way to add max-width to table-cell . You can add a table-cell to each side of the container and set the width to 1500px in the container using media queries , but this is not preferred since there is a workaround.

Decision

If you want to limit the width of the navigator provided in your link to 1500px, you can add a container , just like you, but the structure of the block should be slightly different.

Now you have:

  • banner as a table
  • container as a cell table
  • header_branding and nav_primary as blocks inside a cell

Try changing the structure as follows:

  • banner to block
  • container to table
  • header_branding and nav_primary in table-cells

banner is just a 100% background element.

Then give container a max-width 1500px like you, but remember to also give it 100% width . Otherwize will not try to expand to the full width of the screen, as it should not , but now max-width will be the limiting factor.

Here's a CodePen example presented here , but with a container that limits the width to 1500 pixels.

Your example has changed:

 .banner { width: 100%; } .container { max-width: 1500px; width: 100%; height: 160px; margin: auto; overflow: hidden; display: table; } .header_branding, .nav_primary { vertical-align: middle; display: table-cell; } .header_branding { width: 150px; height: 52px; } .nav_primary { text-align: right; } /* To make edges visible for the demo */ .banner, .container, .header_branding, .nav_primary { background: rgba(0, 0, 0, 0.3); border: 1px dotted red; } 
 <header class="banner"> <div class="container"> <a class="header_branding" href=""> <img src="" /> </a> <nav class="nav_primary"> [Menu items] </nav> </div> </header>
+5
source

You can define height or max-height for .container and then use flex on header :

 .banner { height: 300px; width: 100%; display: flex; align-items: center; justify-content: center; } .container { max-width: 500px; margin-left: auto; margin-right: auto; overflow: hidden; }

CodePen: http://codepen.io/theblindprophet/pen/NAzAWj

This will not work for some versions of IE, more details here .

With display: inline-block :

 /* This parent can be any width and height */ .block { text-align: center; /* May want to do this if there is risk the container may be narrower than the element inside */ white-space: nowrap; } /* The ghost, nudged to maintain perfect centering */ .block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ .centered { display: inline-block; vertical-align: middle; width: 300px; }

CodePen: http://codepen.io/theblindprophet/pen/XKYKdy

Link: CSS Tricks

+1
source

Maybe,

 box-sizing: border-box;

property is what you are looking for;)

+1
source

One possibility of vertically aligning elements inside a container use line-height , since you know the height of your header . The disadvantage of this is that you cannot have multiple lines of text, but this is usually the intention in the first place.

I tried to minimize the code and did a working demo here .

Basically, if the container has a height of 160 pixels, you can add a line-height of 160 pixels for menu items to vertically align them in the middle.

To vertically align the image, I used the accepted method from this question.

For future proof, here is the code used in my demo:

 * { margin: 0; /* Illustrative */ padding: 0; /* Illustrative */ } .banner { background: #222; /* Illustrative */ width: 100%; } .container { background: #aaa; /* Illustrative */ max-width: 800px; /* Change to desired value */ margin: auto; overflow: hidden; } .header__branding { background: #555; /* Illustrative */ float: left; width: 150px; height: 160px; display: block; } .header__branding span { height: 100%; display: inline-block; vertical-align: middle; line-height: 160px; } .nav_primary { float: right; } .nav_primary a { line-height: 160px; } img { background: #3867EA; /* Illustrative */ width: 100px; /* Illustrative */ height: 100px; /* Illustrative */ vertical-align: middle; display: inline-block; } 
 <header class="banner"> <div class="container"> <a class="header__branding" href="#"> <img alt="Logo" /><span>Title</span> </a> <nav class="nav_primary"> <a>Menu1</a> <a>Menu2</a> <a>Menu3</a> </nav> </div> </header>
+1
source

More articles:


All Articles