CSS樣式表是一種強大的工具,它可以用來排列和布局圖像。以下是一些常見的CSS排列圖像的方式。
img { display: block; margin: auto; width: 50%; }
1. 居中對齊
這種方法可以使圖像在父容器中水平和垂直居中對齊。
img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
2. 絕對定位
這種方法可以使圖像絕對定位在父容器中,從而可以實現各種自定義布局效果。
.container { display: flex; justify-content: center; align-items: center; } img { margin: 0 10px; width: 100%; max-width: 300px; }
3. Flexbox布局
這種方法使用了Flexbox布局模型,令圖像在容器中垂直和水平居中對齊。
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } img { width: 100%; }
4. Grid布局
這種方法使用了Grid布局模型,可以實現多列布局或者等寬的列布局效果。