how i can show the image in middle of div i want using CSS_问答_开发者

how i can show the image in middle of div i want using CSS

开发者 https://www.devze.com 2023-02-01 17:20 出处：网络

i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.

相关专题：css

i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.

the image is dynamic maybe it's small or big. i need to show them in middle in every condition.

how i can do this using css. any tric开发者_如何学Ck to do this

Use this:

img {
  margin-left:auto;
  margin-right:auto;
  display: block;
}

Here is a sample page:

<!DOCTYPE HTML>
<html lang="en-EN">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style type="text/css">
  #container {
    background-color: yellow;
    width: 500px;
    height: 300px;
  }
  img {
    margin-left:auto;
    margin-right:auto;
    display: block;
  }
  </style>
</head>
<body>
  <div id="container">
    <img  src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
  </div>
</body>
</html>

Anyway, you have to try it in all the browsers, I'm not sure if it works in all of them.

Centering stuff in HTML with CSS is one of the most painful things.

You could try applying the style text-align: center to the div.

I you need the image to be at the horizontal center you can use the text-align: center on the div container as shown here

But if you need the image to be horizontal and vertical center then it will be easy to do as given here using the background style property