CSS 图像左右对齐

最新推荐文章于 2024-04-23 13:46:57 发布

转载最新推荐文章于 2024-04-23 13:46:57 发布 · 3.6k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lszw/p/10727307.html

文章标签：

#java

本文介绍如何使用CSS的浮动属性(float)实现图像在网页中的左右对齐效果，通过设置图片类align-left和align-right，配合外边距，使图片能够悬浮在段落文字的左侧或右侧。

左右对齐图像使用的技术是浮动div元素。
float:left 左对齐
float:right右对齐
示例
 
  <!DOCTYPE html>
 
  <
  html
  >
 
  <
  head
  >
 
  <
  title
  >图像左右对齐</
  title
  >
 
  <
  meta 
  charset
  =
  "UTF-8"
  >
 
  <
  style 
  type
  =
  "text/css"
  >
 
  body {
 
  font-family: Georgia, "Times New Roman", serif;     /* 字体样式 */
 
  color: #665544;}                          /* 字体颜色 */
 
  img.align-left  {                            /* 图片左边对齐 */
 
  float: left;                            /* 悬浮 左边 显示  */
 
  margin-right: 10px;}                     /* 右边外边距 10 像素 */
 
  img.align-right {                             /* 图片右边对齐  */
 
  float: right;                          /* 悬浮 右边 显示 */
 
  margin-left: 10px;}                      /* 左边外边距 10 像素 */  
 
  img.medium {                      /* 图像中间 */
 
  width: 250px;                /* 宽度250 像素 */
 
  height: 250px;}            /* 高度250像素 */
 
  </
  style
  >
 
  </
  head
  >
 
  <
  body
  >
 
  <
  h1
  >软件开发，成就梦想</
  h1
  >
 
  <
  h2
  >学编程，上利永贞网 https://www.liyongzhen.com/</
  h2
  >          
 
  <
  p
  ><
  img 
  src
  =
  "https://www.0735it.net/images/kc/jspservlet.jpg" 
  alt
  =
  "Servlet/JSP课程"  
  class
  =
  "align-left medium" 
  /><
  b
  ><
  i
  >Servlet</
  i
  >
 
  </
  b
  > 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</
  p
  >       <!--网页插入图片格式:<img src="地址.png" alt="所要显示的文字" class="CSS样式"/>-->
 
  <
  p
  ><
  img 
  src
  =
  "https://www.0735it.net/images/kc/h5.jpg" 
  alt
  =
  "HTML5 课程"  
  class
  =
  "align-right medium" 
  />
 
  <
  b
  ><
  i
  >HTML5</
  i
  ></
  b
  > 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</
  p
  >
 
  </
  body
  >
 
  </
  html
  >