CSS中img的對齊主要是通過控制其display屬性和vertical-align屬性來實現的。下面是常用的對齊方式:
img { display: inline-block; vertical-align: middle; }
讓img的display屬性為inline-block,可以讓其與其他的inline元素一行顯示。
vertical-align屬性可以控制img相對于行框的對齊方式。常用的屬性值有:
- baseline:img的底部與行框的基線對齊
- top:img的頂部與行框的頂部對齊
- middle:img垂直居中
- bottom:img的底部與行框底部對齊
img { display: block; margin: auto; }
如果希望讓img居中顯示,可以將其display屬性設置為block,再將其左右margin設為auto。
img { float: left; margin-right: 10px; }
如果希望讓img與其他的文本進行對齊,可以將其設為浮動元素,再設置一定的margin值以與其他的文本相隔。