具体对齐问题

时间:2019-01-17 03:26:35

标签: html css image alignment

我正在建立一个学校项目,里面有图片库,我正在尝试使图像专门对齐,但是我不知道该怎么做。帮助。

我尝试了基本的右对齐,左对齐和顶对齐,但这不起作用。

<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980" height="620">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500" height="300" align="top">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500" height="300" align="right">
<!-- Line trying to fix -->

我希望第三幅图像位于第二幅图像下方,并且希望第三幅图像与第二幅图像具有相同的大小。

2 个答案:

答案 0 :(得分:0)

HTML5不再支持

align 。在这种特定情况下,如果您指定widthheight的单位(例如px),则图像应正确对齐。

<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" width="980px" height="620px">
<img src="https://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="500px" height="300px">
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" width="500px" height="300px"> <!-- Line trying to fix -->

答案 1 :(得分:0)

您好,我使用98%将它放在1行上。下面是链接。

https://jsfiddle.net/4rL7jnuc/1/ display:flex

如果您需要检查有关弹性盒的更多信息,请检查以下链接。谢谢

https://www.w3schools.com/cssref/css3_pr_flex.asp