0

I have a div and in the div i have placed an image. I am trying to position that div in the center of the page but am unable to. Please help me. Thanks ! 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .bannerimage {
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="bannerimage">
        <img src="images/mailer2.jpg">
    </div>
</body>

Akansha Rattan
  • 23
  • 2

6 Answers6

0

You can use display: flex for your bannerimage class to center it easily. Hope this helps

.bannerimage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: -webkit-fill-available;
}
Stefan Joseph
  • 545
  • 2
  • 10
  • I now want to give padding to the container. I have given the padding but it doesn't seem to work. Could you please see what am I doing wrong here ? Thanks .bannerimage { display: flex; flex-direction: row; align-items: center; justify-content: center; height: -webkit-fill-available; padding: 20px; } – Akansha Rattan Jun 14 '19 at 06:38
  • Try adding a wrapper div to the image. Check this fiddle. Hope it helps https://jsfiddle.net/SJ_KIllshot/1f83dqkn/ – Stefan Joseph Jun 14 '19 at 06:43
0

img {
     display:block;
     margin:  auto;
    }
<body>
    <div class="bannerimage">
        <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150px;" height="150px;">
    </div>
</body>

Check this code.I think this is what you want.:)

Arjun
  • 1,294
  • 13
  • 24
0

You can as already written use display:flex; but there are other ways:

* {
 margin : 0;
 padding : 0;
 }


.bannerimage {
 margin : 0 auto;
 min-width : 20%;
 max-width : 1000px;
 text-align : center;
 backgroud : #000;
 }

What i´ve done is to give the .bannerimage a min- and max-width attribute, you also could use width instead.

Edit:

Sine i don´t know the resolution of your image this was basic example of how to use margin only to show you how to "center" the div itself.

Now that´s everbodys voting down without even thinking of this point: here is a fiddle, with working code! OMG!

https://jsfiddle.net/kymd1jv7/

If you don´t give this class a specific width most browsers will handle this class as it will have a width of 100%.

The "image" could als be centered with text-align : center;

Thorsten Wolske
  • 424
  • 4
  • 9
  • This isn't even right. Here is a fiddle with your code inside it, which you should have done yourself. https://jsfiddle.net/oc53bxaf/ – Claire Jun 14 '19 at 06:06
  • You are joking? This will center the div class, not the image. If you add a background color or as written text-align : center it will center the image as well. – Thorsten Wolske Jun 14 '19 at 06:10
  • build a working fiddle with your css and the asker's posted markup. – Claire Jun 14 '19 at 06:13
  • so add the proper css to your answer – Claire Jun 14 '19 at 06:16
  • The text-align : center; was mentioned at first! Everything i´ve really added was a background color to show that the div itself is declared. – Thorsten Wolske Jun 14 '19 at 06:20
  • There. Providing complete snippets and creating a working example are part of providing a good answer to a question. And look, your downvotes magically went away. – Claire Jun 14 '19 at 06:22
  • And it´s gone. You´re right at this point, that is something i´ve to get used to. – Thorsten Wolske Jun 14 '19 at 06:29
0

there are a lot of ways and this is in addition from https://stackoverflow.com/users/362477/iamnotsam

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .bannerimage {
            margin: 0 auto;
            width:100px;

        }
        body{
          height:100%;
        }
        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="bannerimage">
        <img class="content" src="images/mailer2.jpg">
    </div>
</body>
MattOpen
  • 815
  • 11
  • 24
0

You can achieve this by using transform property. Keep in mind that the parent div should be relative

.bannerimage {
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            border:1px solid red
        }
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <div class="bannerimage">
        <img src="images/mailer2.jpg">
    </div>
</body>
Sai Manoj
  • 3,809
  • 1
  • 14
  • 35
0

add a container with a set width, (width: 100% or display: flex)

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

https://www.w3schools.com/css/css_margin.asp

 .container{
   display:flex;
 }
 #bannerimage {
   margin: 0 auto;
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <div class="container">
        <img src="https://picsum.photos/" id="bannerimage">
    </div>
</body>
Nervus
  • 83
  • 1
  • 5