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 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=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
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=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With