W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <body> <h1>使用 CSS 对齐图像</h1> <h2>vertical-align: bottom</h2> <p>这是一些文本。<img src="/i/photo/flower.gif" alt="Flower" width="90" height="90" style="vertical-align:bottom"> 这是一些文本。这是一些文本。</p> <h2>vertical-align: middle</h2> <p>这是一些文本。<img src="/i/photo/flower.gif" alt="Flower" width="90" height="90" style="vertical-align:middle"> 这是一些文本。这是一些文本。</p> <h2>vertical-align: top</h2> <p>这是一些文本。<img src="/i/photo/flower.gif" alt="Flower" width="90" height="90" style="vertical-align:top"> 这是一些文本。这是一些文本。</p> <h2>float: right</h2> <p>这是一些文本。<img src="/i/photo/flower.gif" alt="Flower" width="90" height="90" style="float:right">这是一些文本。这是一些文本。</p> <h2>float: left</h2> <p>这是一些文本。<img src="/i/photo/flower.gif" alt="Flower" width="90" height="90" style="float:left">这是一些文本。这是一些文本。</p> </body> </html>