Css: "Display: Auto;"

CSS: display: auto; ?

You should use:

$('element').css('display','');

That will set display to whatever is the default for element according to the current CSS cascade.

For example:

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: inline.

But:

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: block.

This is not a problem: in fact, it's almost always the desired result.

Why `*{display:block; margin:0 auto; }` in css to display all the css code on the web?

The * CSS selector selects all elements. This means that it includes the <style> element, as well as the <head> element, which the style tag lives it. Both of these are hidden by default by your browser.

By adding display: block, you are overriding the default display: none for all element, as shown in Chrome Developer Tools screenshot:

Chrome Developer Tools Screenshot

The direct equivalent of this would be to add this to your CSS:

head, style {
  display: block;
}

Workaround

In order to force all elements to be displayed block, and centered, you may want to select just the ones that live inside of the <body> tag like so:

body * {
  display: block;
  margin: 0 auto;
}

What does auto do in margin: 0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Which would give:

margin-left: 25;
margin-right: 25;

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

CSS: display: auto; ?

You should use:

$('element').css('display','');

That will set display to whatever is the default for element according to the current CSS cascade.

For example:

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: inline.

But:

span { display: block }

<span></span>

$('span').css('display','none');
$('span').css('display','');

will result in a span with display: block.

This is not a problem: in fact, it's almost always the desired result.

Why doesn't margin:auto center an image?

Because your image is an inline-block element. You could change it to a block-level element like this:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

and it will be centered.

CSS Grid Layout not working in IE11 even with prefixes

IE11 uses an older version of the Grid specification.

The properties you are using don't exist in the older grid spec. Using prefixes makes no difference.

Here are three problems I see right off the bat.

`repeat()`

The repeat() function doesn't exist in the older spec, so it isn't supported by IE11.

You need to use the correct syntax, which is covered in another answer to this post, or declare all row and column lengths.

Instead of:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Use:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Older spec reference:
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

`span`

The span keyword doesn't exist in the older spec, so it isn't supported by IE11. You'll have to use the equivalent properties for these browsers.

Instead of:

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
      grid-column: span 2;
}

Use:

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

Older spec reference:
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

`grid-gap`

The grid-gap property, as well as its long-hand forms grid-column-gap and grid-row-gap, don't exist in the older spec, so they aren't supported by IE11. You'll have to find another way to separate the boxes. I haven't read the entire older spec, so there may be a method. Otherwise, try margins.

grid item auto placement

There was some discussion in the old spec about grid item auto placement, but the feature was never implemented in IE11. (Auto placement of grid items is now standard in current browsers).

So unless you specifically define the placement of grid items, they will stack in cell 1,1.

Use the -ms-grid-row and -ms-grid-column properties.

CSS Grid auto placement in IE/EDGE
CSS Grid not working in ie11 despite prefixes
https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

display 'auto' on react native not working

Use display: 'flex' when you want to make the component visible again.
In react native, display only supports 'none' and 'flex'. 'flex' is the default value.

I hope it works for you.

Auto Fill and Fit CSS Grid

In the grid container, you can try using this rule to make them fluid:

grid-template-columns: repeat(auto-fill, var(--grid-size));

This will fill the container with columns of size "--grid-size", adding empty columns if there is enough space for them.

If instead you do not want new empty columns to be created, you can use auto-fit instead of auto-fill as the first parameter for the "repeat" function above.

In this MDN page you can learn more about dynamic grid columns using the "repeat" function.

Here it is an updated snippet of your code, I did some editing on the grid container class (removed auto margin and used justify-content to center the columns in the screen).
Also, I removed the link that it's outside of the items, because there was a link inside too. It's not possible in html to put two links one inside of the other, since this causes some wrong html interpretation.

Here it is:

:root{
  --grid-size: 200px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
  margin: 0px;
}

a{
  font-family: monospace;
  font-size: 20px;
}

p{
  font-family: monospace;
}

h1 {
  font-family: monospace;
}

h2 {
  font-family: monospace;
}

.header {
  text-align: center;
  background-color: #000088;
  color: white;
  padding: 5px;
}

.grid-item img{
  width: var(--grid-size);
  height: var(--grid-size);
  border-radius: 10px;
  border-style: solid;
  border-width: 4px;
  border-color:#1F363D;
}

.grid-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--grid-size));
  gap: 20px;
  height: 100%;
  pading: 5px;
  justify-content: center;
}

.grid-item{
  text-align: center;
  padding: 5px;

  width: 200px;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.grid-item a:link {
  text-decoration: none;
  color: #1F363D;
}

.grid-item a:visited {
  color: #1F363D;
}

.grid-item a:hover {
  color: #000088;
}

.grid-item a:active {
  color: #000088;
}

.row {
  display: flex;
  height: 50%;
}

.column {
  flex: 50%;
  display: grid;
  place-content: center;
  text-align: center;

}

.column img {
  width: auto;
  height: 75vh;
  display: block;
}

.column button {
  width: 50%;
  margin: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
  border-color: #000088;
  border-radius: 10px;
  font-family: monospace;
  color: #000088;
  height: 40px;
  transition-duration: 500ms;
  margin-top: 10px;

}

.column button:hover{
  color: white;
  background-color: #000088;
  transition-duration: 500ms;
}

<div class="header">
  <h1>Portfolio</h1>
  <h2>Projects</h2>
</div>
<div class="topnav">
  <a href="/index.html">Home</a>
  <a class="active" href="/projects.html">Projects</a>
  <a href="/contact.html">Contact</a>
  <a href="/about.html">About</a>
</div>

<div class="grid-holder">
    <div class="grid-item" id="mastermind-holder">
      <img src="/images/mastermind-icon.png" />
      <a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
    </div>
    <div class="grid-item" id="simon-holder">
      <img src="/images/simon-icon.png" />
      <a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
    </div>
</div>

display block, margins auto, width specified, not centering

That should work

see http://jsfiddle.net/yWkyE/

.DOC
{
  width:100px;
  height:100px;
  margin:0 auto;
  background-color:#000000;
}

Is there any other CSS in play on the page that might be affecting this DIV? What's your HTML like, could you provide a sample?

Css: "Display: Auto;"

CSS: display: auto; ?

Why `*{display:block; margin:0 auto; }` in css to display all the css code on the web?

Workaround

What does auto do in margin: 0 auto?

CSS: display: auto; ?

Why doesn't margin:auto center an image?

CSS Grid Layout not working in IE11 even with prefixes

`repeat()`

`span`

`grid-gap`

grid item auto placement

display 'auto' on react native not working

Auto Fill and Fit CSS Grid

display block, margins auto, width specified, not centering

Related Topics

Leave a reply