Float image in center

Question

I have an inline image in a paragraph. I want to float that image in the middle of the paragraph. I tried to center it with...

<center>

...but I saw it was depreciated in HTML5.
I tried to use float it with...

<img style="float: middle;">

...but it turns out that that doesn't even exist.

Is there a short way to do this, preferably inside the img tag, like with the style attribute?
Here is my HTML so far...

<p>
    <img id="resize" width="70%" src="../logo.png" alt="Alt" style="CENTER THIS IMAGE... SOMEHOW...">
</p>

Orion closed this question but didn't bother to link to the original answer. So, here it is: https://stackoverflow.com/questions/28336888/html-img-align-middle-not-working — Gabriel, Sep 15 '17 at 10:24

rlcrews · Accepted Answer · 2016-01-20T19:16:29.173

18

You can do it inline using style="display:block; margin-left: auto; margin-right: auto;"

or add it to a css class

    .myimage {
        display:block;
        margin-left: auto;
        margin-right: auto;
    }

Updated Based on CBore comment

edited Jan 20 '16 at 19:16

answered Jan 20 '16 at 19:06

rlcrews

3,482
19
66
116

Dang. beat me to it! – Devin Prejean Jan 20 '16 at 19:07
You try with style="vertical-align: middle;" – step Jan 20 '16 at 19:09
You can put your code html and css? – step Jan 20 '16 at 19:13
3

Auto margins need `display:block` to work here as well. – CBroe Jan 20 '16 at 19:14
CBore is correct I missed that line – rlcrews Jan 20 '16 at 19:15
That works now. Thanks – Jan 20 '16 at 19:21

score 1 · Answer 2 · answered Jan 20 '16 at 19:14

1

You could just add text-align: center; to the <p> tag

Like <p style="text-align:center">

answered Jan 20 '16 at 19:14

Josh M

982
1
7
19

Yes! That works. Thanks. – Jan 20 '16 at 19:16

score 0 · Answer 3 · answered Jan 20 '16 at 19:15

0

If you know the size you want it to be you can put a margin on left and right to equal 100. for instance

 <!DOCTYPE>
<html>
<head>
</head>
<style>
#resize{
margin-left:15%; 
margin-right:15%;
}
</style>
<body>

<div>
<p>
    <img id="resize" width="70%" src="http://codingkids.businesscatalyst.com/logo.png" alt="Alt" >
</p>
</div>
</body>
</html>

answered Jan 20 '16 at 19:15

Devin Prejean

626
6
12

Cleaner method, and the method to use if you are not statically setting a width is to do like CBroe said and put display:block in CSS for the img. I guess I'm just to used to using bootstrap for all my centering needs – Devin Prejean Jan 20 '16 at 19:18

score 0 · Answer 4 · answered Jan 20 '16 at 19:16

0

Well, it's inside a 100% width paragraph. I'm not sure what framework you're working in, but, can you just add the css property (text-align:center;) to that paragraph tag?

answered Jan 20 '16 at 19:16

Aaron Carpenter

90
8

I am working in HTML, CSS, Bootstrap, Foundation and w3.css – Jan 20 '16 at 19:22

Float image in center

4 Answers4