CODEWITHSUNDEEP
htmlcss
Steven Spielberg
Steven Spielberg

Reputation:

how i can show the image in middle of div i want using 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 trick to do this

Upvotes: 1

Views: 1346

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388406

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

Upvotes: 0

Christian
Christian

Reputation: 1892

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.

Upvotes: 1

Kyle
Kyle

Reputation: 2872

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

Upvotes: 0

Related Questions