图片对齐

学习如何将图片进行居中对齐、左侧浮动和右侧浮动。

赞助

成为我们的资助者或赞助商,以支持我们的工作。

赞助商

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.