CODEWITHSUNDEEP
htmlcss
Youstay Igo
Youstay Igo

Reputation: 307

Centering a layer of unspecified width

For the sake of record, I have read How do I center a div with an unspecified width? and found that although my problem is related to it, it is not exactly that.

I have a layer containing only one image (the logo of my site) and nothing else. Right now I do know the size (width) of the logo image (and hence the width of the layer) and if I specify the width of the layer, I am able to put it in the center of the page. That is:

#logodiv {
position:absolute;
width:200px;
margin:auto;
}

and inside the webpage source

<div id="logodiv">
<img src="logo.png" />
</div>

However for the sake of making my site more responsive for smaller display size devices, I do not want to specify the width of logodiv in hard and fast figures. But then I am unable to place my logo layer in the center of the page.

Any workaround for that?

Upvotes: 2

Views: 80

Answers (2)

Shantanu Verma
Shantanu Verma

Reputation: 260

Try this-

#logidiv{
margin:0px auto;
display:flex;
justify-content:center
}

Upvotes: 1

c-smile
c-smile

Reputation: 27470

If your markup looks like this:

<div id=logodiv>
  <img src="logo.png">
</div>

then you can use this style

#logodiv {
  width:max-content;
  margin: 0 auto;
}

to center it horizontally.

Upvotes: 1

Related Questions