I want a image to be centered aligned. Image size is fixed in pixels.
So what I want is like this-
.
What I have done is-
<!DOCTYPE html>
<html>
<body>
<img
src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"
align="middle"
style="float: left;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;"
>
</body>
</html>
But I am getting-
I want it to be responsive.
Can anyone help me please?
The answer is
How about this? I frequently use the CSS Flexible Box Layout to center something.
<div style="display: flex; justify-content: center;">_x000D_
<img src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png" style="width: 40px; height: 40px;" />_x000D_
</div>You don't need align="center" and float:left. Remove both of these. margin: 0 auto is sufficient.
remove float: left from image css and add text-align: center property in parent element body
<!DOCTYPE html>_x000D_
<html>_x000D_
<body style="text-align: center;">_x000D_
_x000D_
<img_x000D_
src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"_x000D_
width="42" height="42"_x000D_
align="middle"_x000D_
style="_x000D_
_x000D_
display: block;_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
z-index: 1;"_x000D_
>_x000D_
_x000D_
</body>_x000D_
</html>The attribute align=middle sets vertical alignment. To set horizontal alignment using HTML, you can wrap the element inside a center element and remove all the CSS you have now.
<center><img src=_x000D_
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"_x000D_
width="42" height="42"></center>If you would rather do it in CSS, there are several ways. A simple one is to set text-align on a container:
<div style="text-align: center"><img src=_x000D_
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"_x000D_
width="42" height="42"></div>remove float left.
Edited: removed reference to align center on an image tag.
Try this:
style="margin: auto"
Change 'middle' to 'center'. Like so:
<img align="center" ....>
just remove float: left and replace align with margin: 0 auto and it will be centered.
Source: Stackoverflow.com