[英]How can I center an image link in html?
I'm trying to use an image as a link but only one image can be clicked and the other images aren't working as links.我正在尝试将图像用作链接,但只能单击一个图像,而其他图像无法用作链接。 I use text-center class my HTML code:
我使用文本中心 class 我的 HTML 代码:
<div class="foot text-center">
<a href="https://www.facebook.com/basmaEsmailGh/"><img src="img/face.png" alt="facebook"></a>
<a href="https://twitter.com"> <img src="img/tw.png" alt="twitter"></a>
<a href="https://www.linkedin.com"> <img src="img/in.png" alt="linkedin"> </a>
</div>
and my css file only has for "foot" class:而我的 css 文件只有“脚” class:
.foot{
height: 100px;
background-color: #401BE6;
} }
what is the problem?问题是什么?
u need to define a display: block;
你需要定义一个
display: block;
on that <a href=''>
element在那个
<a href=''>
元素上
Inline elements can't be aligned center unless we use the display: block
property on them so apply the display: block
property to the anchor elements内联元素不能居中对齐,除非我们在它们上使用
display: block
属性,所以将display: block
属性应用到锚元素
I hope I interpreted your desired final outcome.我希望我解释了您想要的最终结果。
https://jsfiddle.net/vLk8gtjs/30/ https://jsfiddle.net/vLk8gtjs/30/
Make your buttons inline instead of vertically stacked.让你的按钮内联而不是垂直堆叠。 Therefore: create a new class and class each link.
因此:创建一个新的 class 和 class 每个链接。 I changed the bg to make it easier for me to work with
我更改了 bg 以使我更容易使用
.img_links {
text-align: center;
display: inline-block;
width: 32%;
}
This aligns links within your div footer box.这会对齐您的 div 页脚框中的链接。
I'm not sure why your links aren't working.我不确定为什么您的链接不起作用。 Try this solution out and leave a comment if your images are displayed, but not clickable.
试试这个解决方案,如果您的图像显示但不可点击,请发表评论。
OPTION ONE选项一
.foot.text-center {
display: block;
text-align: center;
}
OPTION TWO (INLINE CSS)选项二(内联 CSS)
<div class="foot text-center" align="center">
<a href="https://www.facebook.com/basmaEsmailGh/"><img src="img/face.png" alt="facebook"></a>
<a href="https://twitter.com"> <img src="img/tw.png" alt="twitter"></a>
<a href="https://www.linkedin.com"> <img src="img/in.png" alt="linkedin"> </a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.