How to adjust the position of pictures in css

The methods to adjust the position of the image in CSS are: 1. Direct method: use margin, padding and float to set the outer margin, inner margin and float of the image; 2. Positioning method: use position, left, right, top and bottom set the positioning and displacement of the image; 3. Flexible layout: use flexbox and grid flexible layout to adjust the position and size of the image; 4. Other methods: use background-position to set the position of the background image, and use transform to fine-tune the image transformation.

Adjust the image position in CSS

Direct method:

• margin: Set the image margins and adjust its position relative to the parent element.
• padding: Set the inner margin of the image and adjust its position relative to its own frame.
• float: Float the image so that it is aligned along one side.

Positioning method:

• position: Specify the positioning type of the image (absolute, relative, fixed).
• left, right, top, bottom: Set the position of the image relative to the parent element or window.

Flexible layout:

• flexbox: Use flexible layout to adjust the position and size of the image within the container.
• grid: Use grid layout to create multi-column layouts and precisely control the position of pictures.

Other methods:

• background-position: Set the position of the background image.
• transform: Use transformations for fine-tuning, such as rotation, scaling, or offset.

Usage:

/* 直接法 */
img {
  margin-left: 10px;
  padding: 5px;
  float: right;
}

/* 定位法 */
img {
  position: absolute;
  top: 0;
  left: 50%;
}

/* 灵活布局 */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 200px;
  height: 200px;
}

/* 其他方法 */
body {
  background-image: url("background.jpg");
  background-position: center;
}

img {
  transform: rotate(10deg) scale(1.2);
}

The above is the detailed content of How to adjust the position of pictures in css. For more information, please follow other related articles on the PHP Chinese website!