Clever Geek Handbook

What is the equivalent of -moz-fit-content and -moz-center

I am trying to center the alignment of the elements of an element one below the other, inside the parent element, where the elements take the minimum width and height, like when using display:inline-block 

.parent {
    text-align: -moz-center;
    text-align: -webkit-center;
    text-align: -ms-center;
}

.parent a {
    display:block;
    width:-moz-fit-content;
    width:-webkit-fit-content;
    width:-ms-fit-content;
    background-color:red;

}


<div class="parent">
  <a href ="#">Link1</a>
  <a href="#">Link2</a>
</div>

I can see it works for Chrome and Firefox, but doesn't work for IE. Does anyone know what is equivalent to -moz-center

, and -moz-fit-content

in IE?

+3


source to share


3 answers


Why not just use the actual one inline-block

for the container? Moreover, display:table

u float:left

will have the same effect.



.parent {
  display: inline-block;
  background: #eee;
}
.parent a {
  display: block;  
  text-align: center;
}
      

        
        
        
      

    
<div class="parent">
  <a href ="#">Link1 is long</a>
  <a href="#">Link2</a>
</div>
Run codeHide result


+6


source


this is not relevant to your topic, but still I have a question?

why do you want to use -moz-center and -moz-fit-content ???

you can display the same result with a different approach

SEE THIS FIDDL http://jsfiddle.net/mk2zxujx/6/



eg

.parent{
margin:auto 0;
text-align:center;
}


.parent a {
display:block;
background-color:red;
color:white;    
}


a{
  width:auto;// to make it responsive - you can give your own value if you want
  min-width:50px; //since you asked for a minimum width 
}

I hope it works in all browsers

0


source


I would like to add to this, that if you are trying to set the width of the inner area, your best bet is to use:

width: intrinsic;

This will use the width of the area you have, not the entire area.

0


source






More articles:


All Articles