欢迎来到图片对齐！展示各种图片定位选项的最佳方式是将它们舒适地嵌套在文字的海洋中。拿起桨，让我们开始吧。
关于对齐的话题，应该注意的是，用户可以从无、左对齐、右对齐和居中选项中选择。此外，他们还可以选择缩略图、中等、大和完整尺寸。请务必在 RTL 模式下尝试此页面，它应该看起来与 LTR 相同。
上面的图片恰好是居中的。
本段的其余部分是填充内容，目的是为了看到文本环绕 150×150 图片，该图片是左对齐的。
正如您所看到的，图片上方、下方和右侧应该有一些空间。文字不应该爬到图片上。爬到图片上是不对的。图片也需要呼吸空间。让它们像文字一样说话。让它们在没有文字的任何麻烦下完成它们的工作。在接下来的一句话中，我们将看到文字从图片的右侧移动到图片下方，实现无缝过渡。再次，让图片完成它的任务。任务完成！
现在是超大图片。它也没有对齐方式。
上面的图片虽然有 1200px 宽，但不应溢出内容区域。它应该保持在内容区域内，并且不会对内容流造成可见的破坏。
我们再次尝试大图片，使用居中对齐，因为有时这是一个问题。上面的图片虽然有 1200px 宽，但不应溢出内容区域。它应该保持在内容区域内，并且不会对内容流造成可见的破坏。
现在我们要将内容转移到右对齐。同样，图片上方、下方和左侧应该有足够的空间。看看他站在那里…… 嘿，伙计！右侧很棒。我不在乎左对齐的图片说什么，你看上去很棒。不要让任何人告诉你不同的。
稍等片刻，您应该看到文字开始环绕右对齐的图片下方，并很好地安顿下来。应该仍然有足够的空间，一切都应该摆放得很好。是的…… 就像那样。右对齐感觉真好。
就在你以为我们完成的时候，我们将再次对所有图片添加标题！
上面的图片恰好是居中的。标题中也包含一个链接，只是为了看看它是否会产生任何奇怪的效果。
本段的其余部分是填充内容，目的是为了看到文本环绕 150×150 图片，该图片是左对齐的。
正如您所看到的，图片上方、下方和右侧应该有一些空间。文字不应该爬到图片上。爬到图片上是不对的。图片也需要呼吸空间。让它们像文字一样说话。让它们在没有文字的任何麻烦下完成它们的工作。在接下来的一句话中，我们将看到文字从图片的右侧移动到图片下方，实现无缝过渡。再次，让图片完成它的任务。任务完成！
现在是超大图片。它也没有对齐方式。
上面的图片虽然有 1200px 宽，但不应溢出内容区域。它应该保持在内容区域内，并且不会对内容流造成可见的破坏。
再次使用居中的大图片。上面的图片虽然有 1200px 宽，但不应溢出内容区域。它应该保持在内容区域内，并且不会对内容流造成可见的破坏。
现在我们要将内容转移到右对齐。同样，图片上方、下方和左侧应该有足够的空间。看看他站在那里…… 嘿，伙计！右侧很棒。我不在乎左对齐的图片说什么，你看上去很棒。不要让任何人告诉你不同的。
稍等片刻，您应该看到文字开始环绕右对齐的图片下方，并很好地安顿下来。应该仍然有足够的空间，一切都应该摆放得很好。是的…… 就像那样。右对齐感觉真好。
就这样结束了，哟！您在动荡的对齐方式中幸存下来。图片对齐成就已解锁！最后一件事是一个小的右对齐图片。之后的内容应该不受影响。
发表评论