圖片對齊

學習如何將圖片進行居中對齊、左側浮動和右側浮動。

贊助

成為我們的資助者或贊助商,以支持我們的工作。

贊助商

URL 片段

URL 片段 ID 用於圖片對齊,其中 #center#float-start#float-end 分別表示居中對齊、左側浮動和右側浮動。

圖片居中對齊

添加 #center 片段 ID 以使圖片居中對齊。

Center
![Center](/images/great-wall.jpg#center)

圖片左側浮動

添加 #float-start 片段 ID 以使圖片左側浮動,你可能需要清除浮動,以避免其破壞佈局,對於 Bootstrap 用戶,你可以用 bs/clearfix 短代碼包裹浮動內容。

源碼
1{{% bs/clearfix %}}
2![Float Start](/images/great-wall.jpg?crop=200x120#float-start) In suscipit orci risus, vitae varius mauris dapibus id. Fusce feugiat at ligula at tristique. Suspendisse dui urna, dignissim et hendrerit sit amet, finibus ut metus. Mauris ac turpis in nibh tempor luctus at sed est. Donec in pellentesque lectus. Quisque sit amet aliquam ipsum, sit amet scelerisque felis. Donec convallis turpis mauris, eu tristique sapien cursus quis. Cras tempus massa ut tempor semper. Nam feugiat varius arcu, vel accumsan dui suscipit sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vel est sed mauris tincidunt consequat quis at enim. Pellentesque sed tincidunt sem.
3
4Vivamus lobortis consequat ultricies. Suspendisse finibus mi vel quam suscipit interdum. Nam in enim mollis neque feugiat congue at et metus. Pellentesque mi ex, faucibus ut dapibus id, interdum sed sem. Proin pellentesque et sapien nec iaculis. Suspendisse consequat metus sit amet consectetur ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
5{{% /bs/clearfix %}}
結果

Float Start In suscipit orci risus, vitae varius mauris dapibus id. Fusce feugiat at ligula at tristique. Suspendisse dui urna, dignissim et hendrerit sit amet, finibus ut metus. Mauris ac turpis in nibh tempor luctus at sed est. Donec in pellentesque lectus. Quisque sit amet aliquam ipsum, sit amet scelerisque felis. Donec convallis turpis mauris, eu tristique sapien cursus quis. Cras tempus massa ut tempor semper. Nam feugiat varius arcu, vel accumsan dui suscipit sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vel est sed mauris tincidunt consequat quis at enim. Pellentesque sed tincidunt sem.

Vivamus lobortis consequat ultricies. Suspendisse finibus mi vel quam suscipit interdum. Nam in enim mollis neque feugiat congue at et metus. Pellentesque mi ex, faucibus ut dapibus id, interdum sed sem. Proin pellentesque et sapien nec iaculis. Suspendisse consequat metus sit amet consectetur ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

圖片右側浮動

類似地,我們可以通過添加 #float-end 片段 ID 以使圖片右側浮動。

源碼
1{{% bs/clearfix %}}
2![Float End](/images/great-wall.jpg?crop=200x120#float-end) Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit nunc, fermentum sed eros vitae, euismod tempus tortor. Proin vulputate ac ligula eget lacinia. Morbi nec cursus leo. Etiam massa est, molestie quis commodo in, tincidunt vel ipsum. Etiam eget dolor diam. Suspendisse sodales elit mauris, non vehicula elit pharetra eu. Integer volutpat quam sed libero scelerisque iaculis. Proin bibendum augue neque, et luctus felis convallis a. Aliquam sit amet neque nec sapien consequat varius sit amet vitae augue. Curabitur egestas orci enim.
3
4Maecenas interdum, metus id ornare interdum, purus lacus gravida velit, at volutpat tellus dolor at orci. Quisque venenatis ut ipsum sed rutrum. Nunc porta sed orci in facilisis. Suspendisse non sapien molestie, dictum tellus sed, faucibus diam. Donec rutrum lacus turpis, non bibendum neque sagittis at. Phasellus condimentum nisi et neque tempor, pellentesque laoreet ante dignissim. Sed maximus hendrerit mi, quis rhoncus odio. Vivamus posuere metus eget mattis tempor. Aliquam suscipit sed lacus id tincidunt. Etiam consectetur eu magna eu rutrum. Nullam ultrices vitae leo dictum ultricies.
5{{% /bs/clearfix %}}
結果

Float End Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit nunc, fermentum sed eros vitae, euismod tempus tortor. Proin vulputate ac ligula eget lacinia. Morbi nec cursus leo. Etiam massa est, molestie quis commodo in, tincidunt vel ipsum. Etiam eget dolor diam. Suspendisse sodales elit mauris, non vehicula elit pharetra eu. Integer volutpat quam sed libero scelerisque iaculis. Proin bibendum augue neque, et luctus felis convallis a. Aliquam sit amet neque nec sapien consequat varius sit amet vitae augue. Curabitur egestas orci enim.

Maecenas interdum, metus id ornare interdum, purus lacus gravida velit, at volutpat tellus dolor at orci. Quisque venenatis ut ipsum sed rutrum. Nunc porta sed orci in facilisis. Suspendisse non sapien molestie, dictum tellus sed, faucibus diam. Donec rutrum lacus turpis, non bibendum neque sagittis at. Phasellus condimentum nisi et neque tempor, pellentesque laoreet ante dignissim. Sed maximus hendrerit mi, quis rhoncus odio. Vivamus posuere metus eget mattis tempor. Aliquam suscipit sed lacus id tincidunt. Etiam consectetur eu magna eu rutrum. Nullam ultrices vitae leo dictum ultricies.