[英]Centering an image for responsive website
So i am making a responsive design for a school assignment and i am trying to center an image width. 因此,我正在为学校的作业做一个响应式设计,我正在尝试将图像宽度居中。
i scaled the image in photoshop so i don't have to set any width or height to the image 我在Photoshop中缩放了图像,因此不必为图像设置任何宽度或高度
this is what i got now but this does not work 这是我现在得到的,但这不起作用
<header> <img src="afb%20/logo3.png" alt="logo3" width="" height="" /> </header>
header{ width: 100%; margin-left: auto; margin-right: auto; }
Can someone help me out ? 有人可以帮我吗 ? really need this ! 真的需要这个!
thanks in advance 提前致谢
Just set text-align: center
in the header CSS. 只需在标题CSS中设置text-align: center
。
You are currently making the header 100% width, so your margins wont apply. 您当前正在将标题设置为100%宽度,因此您的边距将不适用。 Furthurmore since your container is 100% wide and there is no text-alignment, the img will ALWAYS be aligned on the left. 此外,由于您的容器的宽度为100%,并且没有文本对齐方式,因此img始终会在左侧对齐。
Here: 这里:
header { width: 100%; text-align: center; }
.center{margin: 0px auto; display: block;}
<header><img src="updates_button.jpg" alt="logo3" class="center"></header>
You could add a logo class to the image and set the CSS to : margin:0px auto; width:200px;
您可以在图像上添加徽标类,并将CSS设置为: margin:0px auto; width:200px;
margin:0px auto; width:200px;
of course replace the image width... 当然要替换图像宽度...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.