Mohammad Hosein Bin Mohammad Hosein Bin - 4 months ago 9
HTML Question

Adjusting an Object on Center , works only when I determine width

Currently I'm working on sort of Images , I want them to be in Center of page So I'm using margin-left and margin-right set to auto to center it.
and here's the problem :

it does not work when i let browser find the width , if i set Width to auto ,
it'll be in left side of page

this problem can result responsibility problem , and makes page not compatible with Retina
Here's My HTML code:

<div class="lang">
<a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a><a><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/>
</div>


and CSS Class :

.lang {
margin-left:auto;
margin-right:auto;
width:96px;
height:32px;
margin-bottom:3px;
}

Answer

You can do it with Css flex as follows:

.lang {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
<div class="lang">
  <a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a>
  <a href="#"><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/></a>
</div>

For horizontal center alignment:

.lang {
    justify-content: center;
    align-items: center;
    display: flex;
}
<div class="lang">
    <a href="http://en.devcom.ir"><img src="english.png" title="Visit Our English Community" /></a>
    <a href="#"><img id="shw" onClick="document.getElementById('box').style.display= 'block'" src="persian.png"/></a>
</div>

Comments