How to center a image in a
?

Question

So i have this login bar(i DO NOT copy this from w3schools.com, i just borrow the avatar :p ):

<!DOCTYPE html>
<html>
<head>
<style> {
    button.cancle:hover
    background-color:red;
    cursor: pointer;
}
button.cancle {
    border: none;
    padding: 10px 18px;
    background-color:#f44336;
    color: white;
    margin: 8px;
}
input[type=submit] {
    color: white;
    background-color: #2D9409;
    cursor: pointer;
}
input {
    padding: 8px;
    margin: 8px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ccc;
}
div {
    padding: 40px;
    background-color: LightGrey;
    display: block;
}
div.img {
    text-align:center;
}
</style>
</head>
<body style="font-family:sans-serif">
<div class="login">
<form>
<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png height=300px width=300px style="border-radius:50%">
</div>
<label>Username:</label><br>
<input type=text placeholder="Username..." required><br>
<label>Password:</label><br>
<input type=password placeholder="Password..." required>
<br>
<input type=submit value=Login>
<button class="cancle">Cancle</button>
<span style="float:right; margin: 16px;">Forgot <a href="#">password?</a></span>
</form>
</div>
</body>
</html>

The proplem is if i resize my window big enough the image will start popping out of the <div>. Can someone help me with this?

And answer using css only please, thanks !(i don't know how to use viewport, sorry)

Possible duplicate of [Center image using text-align center?](http://stackoverflow.com/questions/7055393/center-image-using-text-align-center) — Patrick Mlr, Jan 18 '17 at 06:19
here is mistake: `{ button.cancle:hover background-color:red; cursor: pointer; }` should look: `button.cancle:hover { background-color:red; cursor: pointer; }` — Banzay, Jan 18 '17 at 06:25
@Scott AFAIK After minification the HTML we got with same syntax so nothing wrong in that. — aavrug, Jan 18 '17 at 06:29
There's nothing *technically* wrong with unquotes attributes... until you try adding spaces in them, such as multiple classes on a single element. It's just good practice to quote attributes in my experience. — Scott, Jan 18 '17 at 06:36

score 2 · Accepted Answer · answered Jan 18 '17 at 06:33

Remove the height and width style attributes of your image and set a width of 100% and max-width: 300px(as what you require). Then your image will contain in your div correctly.

Set

In your CSS

div.img img {
    width: 100%;
    max-width: 300px;
}

In your HTML

<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
</div>

Here is the working snippet.

<!DOCTYPE html>
<html>

<head>
    <style>
        button.cancle: hover {
            background-color: red;
            cursor: pointer;
        }
        
        button.cancle {
            border: none;
            padding: 10px 18px;
            background-color: #f44336;
            color: white;
            margin: 8px;
        }
        
        input[type=submit] {
            color: white;
            background-color: #2D9409;
            cursor: pointer;
        }
        
        input {
            padding: 8px;
            margin: 8px;
            box-sizing: border-box;
            width: 100%;
            border: 1px solid #ccc;
        }
        
        div {
            padding: 40px;
            background-color: LightGrey;
            display: block;
        }
        
        div.img {
            text-align: center;
        }
        
        div.img img {
            width: 100%;
            max-width: 300px;
        }
    </style>
</head>

<body style="font-family:sans-serif">
    <div class="login">
        <form>
            <div class="img">
                <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
            </div>
            <lable>Username:</lable>
            <br>
            <input type=text placeholder="Username..." required>
            <br>
            <lable>Password:</lable>
            <br>
            <input type=password placeholder="Password..." required>
            <br>
            <input type=submit value=Login>
            <button class="cancle">Cancle</button>
            <span style="float:right; margin: 16px;">Forgot <a href="#">password?</a></span>
        </form>
    </div>
</body>

</html>

score 1 · Answer 2 · answered Jan 18 '17 at 08:09

1

I love the next approach:

Using the next class in any element, you will center it against it parent:

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

It helps me so long, like an old friend... :P

Cheers mate.

answered Jan 18 '17 at 08:09

Kenzo_Gilead

2,187
9
35
60

Jagajit Prusty · Answer 3 · 2017-01-18T06:36:03.533

0

Use CSS3 powerful flexbox to align image center both horizontally and vertically.

<div class="container">
<img src="a" alt="">
</div>

<style>
.container{
height: 60px;
display : flex;
justify-content: center; //Horizontally center
align-items: center; //Vertically center
}
</style>

if you have multiple images then you can use justify-content: space-around;. Hopefully it helps.

edited Jan 18 '17 at 06:36

answered Jan 18 '17 at 06:25

Jagajit Prusty

2,070
2
21
39

`align-items` not `alignt-items` – Matt Komarnicki Jan 18 '17 at 06:29

Rajbir Sharma · Answer 4 · 2017-01-18T07:57:26.843

0

CSS Need to update :

div.img{
  text-align:center;
}
div.img img{
    width: 100%;
    max-width: 340px;
}

Need to updated HTML markup for image block :

<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
</div>

edited Jan 18 '17 at 07:57

answered Jan 18 '17 at 07:16

Rajbir Sharma

111
6

How to center a image in a ?

4 Answers4

How to center a image in a
?