Làm cách nào để di chuyển hình ảnh sang phải trong css?

Bạn nên biết cách sử dụng các thuộc tính CSS trên các phần tử. Bài viết này sẽ giải thích thuộc tính object-position và float với một ví dụ dễ hiểu

cú pháp

1. thuộc tính vị trí đối tượng. Cú pháp của thuộc tính vị trí đối tượng

object-position : 
vị trí có thể là một giá trị số chỉ định khoảng cách từ bên trái của hộp nội dung (i. trục e x) và khoảng cách từ đầu hộp nội dung (i. e. , trục y). Nó cũng có thể lấy các giá trị như trái, phải, trên, dưới và ban đầu và kế thừa chúng dưới dạng một chuỗi để chỉ định vị trí
2. tài sản nổi. Cú pháp của thuộc tính float
float : none|inherit|left|right|initial
phương pháp
Phương pháp 1. Sử dụng thuộc tính vị trí đối tượng
object-position property: The object position property is used to position any element within a container to the required position within the container. The < img > element or < video > element are mostly positioned within a container using the object position property.
cú pháp
Cú pháp cho thuộc tính vị trí đối tượng là
object-position: position
Vị trí có thể nhận các giá trị số, chuỗi cụ thể, tỷ lệ phần trăm, độ dài và giá trị bù cạnh. Một số giá trị được hiển thị trong các ví dụ bên dưới
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/*  values */
object-position: 20% 80%;

/*  values */
object-position: 0 0;
object-position: 3cm 9cm;
object-position: 7ch 15em;

/* Edge offsets values */
object-position: bottom 12px right 40px;
object-position: right 4em bottom 15px;
object-position: top 0 right 18px;

Ví dụ Hãy xem một ví dụ đơn giản về thuộc tính vị trí đối tượng và đặt img ở trên cùng bên trái của vùng chứa
!

  
    
  

  
    
      
    
  

đầu ra
Phương pháp 2. Sử dụng thuộc tính float



tài sản nổi. Thuộc tính float được sử dụng để thay đổi vị trí hình ảnh trong CSS sang cực bên trái hoặc cực bên phải của vùng chứa. Float được sử dụng để định vị một phần tử chỉ theo chiều ngang. Cú pháp của thuộc tính float như sau
float : none|inherit|left|right|initial
nơi đây,
bên trái. đặt phần tử ở cực bên trái của vùng chứa bên phải. đặt phần tử ở cực bên phải của vùng chứa kế thừa. kế thừa thuộc tính nổi từ cha mẹ của nó (div, phần tử ngữ nghĩa, v.v. ) không ai. phần tử được hiển thị ở vị trí ban đầu của nó như nó là
 
Hầu hết công việc chúng tôi đã thực hiện với CSS khá đơn giản. thay đổi phông chữ, màu sắc, khoảng cách và đường viền. Tất cả những thay đổi đó đều hữu ích và cần thiết, nhưng không phải là phần khó của CSS
Mọi thứ trở nên thú vị hơn khi bạn bắt đầu di chuyển nội dung trên trang
Tài sản !

  
    
  

  
    
      
    
  

4
Cách dễ nhất để di chuyển nội dung là thuộc tính 
!

  
    
  

  
    
      
    
  

4. Nó sẽ lấy nội dung và di chuyển nó sang bên trái hoặc bên phải của trang
Khi nội dung nổi di chuyển, bất kỳ nội dung nào theo sau nó sẽ di chuyển lên trên và chảy xung quanh nó. Điều đó có nghĩa là nội dung nổi sẽ di chuyển sang một bên của trang và văn bản khác sẽ tránh trùng lặp với nó
Như một ví dụ về 
!

  
    
  

  
    
      
    
  

4 (và các thuộc tính CSS sau này trong chủ đề này), chúng tôi sẽ sử dụng một trang HTML có cấu trúc như thế này

Part 1
…
…


Part 2
…
Để minh họa cách hoạt động của 
!

  
    
  

  
    
      
    
  

4, chúng tôi sẽ áp dụng CSS này
#happy {
  float: right;
}
Trang kết quả sẽ trông như thế này
Trang có áp dụng float
Bạn có thể xem ví dụ này trong trình duyệt của mình nếu bạn thích. Bạn có thể chọn các biểu định kiểu khác nhau được mô tả ở đây và thử nghiệm với chiều rộng của nội dung để xem điều đó ảnh hưởng đến bố cục như thế nào



Như bạn có thể thấy, các
được di chuyển sang bên phải của trang và văn bản xuất hiện sau văn bản đó sẽ tránh chồng chéo lên văn bản đó, nhưng bên dưới hình, văn bản này sẽ kéo dài trở lại phía bên phải của trang
Cũng lưu ý. vị trí thẳng đứng của hình không thay đổi. nó ở ngay bên dưới cái đầu tiên
, nơi bạn mong đợi. Nó chỉ di chuyển sang bên phải. Đoạn sau được chuyển lên trên và có các dòng được gói lại
Tài sản #happy {
  float: right;
}0
Khi trôi nổi một số nội dung như vậy, thông thường không nhất thiết phải biết chính xác những gì sẽ theo sau. Nếu bạn có một khối nổi lớn, có thể khó dự đoán nó sẽ tương tác như thế nào với nội dung theo sau
Trong ví dụ trên, bạn có thể thấy rằng phần thứ hai bắt đầu trong khi nội dung nổi vẫn ở bên phải của nó. Sẽ là bất thường khi bắt đầu một phần khác của trang trong khi nội dung từ phần trước đó vẫn còn đó. thật tuyệt nếu di chuyển nội dung sau xuống bên dưới hình nổi
Thuộc tính 
#happy {
  float: right;
}
0 chỉ làm điều này. nó nói với trình duyệt rằng bạn muốn di chuyển một phần nội dung xuống cho đến khi không có gì nổi bên cạnh nó. bên trái, bên phải hoặc cả hai bên
Để giải quyết vấn đề bắt đầu một phần mới với nội dung nổi bên cạnh nó, chúng ta có thể làm điều gì đó như thế này trong CSS
float : none|inherit|left|right|initial
0
Nó sẽ trông như thế này trong trình duyệt, như sau
di chuyển xuống cho đến khi không có gì nổi ở bên trái hoặc bên phải của nó. 
Trang được áp dụng float và xóa
Chúng tôi cũng có thể chỉ định 
#happy {
  float: right;
}
2 trong trường hợp này, vì không có gì nổi ở bên trái. Có lẽ sẽ đầy đủ hơn khi chỉ định 
#happy {
  float: right;
}
3. chúng tôi sẽ không muốn bắt đầu một phần với bất kỳ thứ gì nổi ở bên trái nếu chúng tôi đã làm điều đó sau trên một số trang khác. Bạn cũng có thể thử nghiệm với ví dụ này
Các tài sản 
!

  
    
  

  
    
      
    
  

4 và 
#happy {
  float: right;
}
0 hoạt động tốt. Tuy nhiên, có nhiều ý tưởng thiết kế trực quan mà bạn có thể muốn thực hiện nhưng lại rất khó ánh xạ vào các thao tác thả nổi. Trong những trường hợp đó, chúng ta cần tìm kiếm một công cụ mạnh mẽ hơn…
Tài sản #happy {
  float: right;
}6
Thuộc tính 
#happy {
  float: right;
}
6 vừa mạnh vừa nguy hiểm hơn 
!

  
    
  

  
    
      
    
  

4 và 
#happy {
  float: right;
}
0
Đặt 
float : none|inherit|left|right|initial
00 trên một phần tử cho phép bạn sử dụng các thuộc tính CSS 
float : none|inherit|left|right|initial
01, 
float : none|inherit|left|right|initial
02, 
float : none|inherit|left|right|initial
03 và 
float : none|inherit|left|right|initial
04 để di chuyển phần tử xung quanh trang đến chính xác nơi bạn muốn. Ví dụ: đặt 
float : none|inherit|left|right|initial
05 di chuyển phần tử sao cho đầu của phần tử cách đầu trang là 
float : none|inherit|left|right|initial
06
Điều này nghe có vẻ dễ dàng. Ví dụ: chúng ta có thể di chuyển hình ảnh lên trên cùng bên phải của trang như thế này
object-position: position
4
Điều đó sẽ hiển thị như thế này. Bạn có thể thử nghiệm với ví dụ này và cả những ví dụ sau



Trang bị sai vị trí
Bạn có thể thấy vấn đề với 
#happy {
  float: right;
}
6. ngay khi bạn bắt đầu định vị nội dung, nội dung đó sẽ bị loại khỏi luồng nội dung thông thường trên trang và sẽ chồng lên nội dung khác. Đây là điều bạn phải hết sức lưu ý khi sử dụng 
#happy {
  float: right;
}
6. bạn cần nghĩ đến tất cả các cách có thể để nội dung của bạn có thể trùng lặp trên các thiết bị và kích thước cửa sổ khác nhau
Vẫn còn một số cách định vị tuyệt đối có thể hữu ích. Ví dụ: chúng tôi có thể cho phép chồng chéo nhưng làm cho nó trông ổn với 
float : none|inherit|left|right|initial
09 để làm cho nội dung trong mờ
object-position: position
8
Giá trị âm 
object-position: position
40 di chuyển con số phía sau nội dung khác. Điều đó có vẻ hợp lý. chúng tôi có thể cho phép nội dung chồng lên nhau, nhưng không sao vì kiểu dáng khác được thực hiện với nội dung đó
Trang có định vị và minh bạch
Một cách sử dụng tốt khác của định vị tuyệt đối. di chuyển nội dung xung quanh khi bạn biết chính xác mình có bao nhiêu dung lượng để làm việc. Ví dụ ở đây ta sẽ chuyển hình lên đầu trang. kỹ thuật này có thể hữu ích cho menu hoặc tiêu đề trang (có tiêu đề trang, logo và menu)
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/*  values */
object-position: 20% 80%;

/*  values */
object-position: 0 0;
object-position: 3cm 9cm;
object-position: 7ch 15em;

/* Edge offsets values */
object-position: bottom 12px right 40px;
object-position: right 4em bottom 15px;
object-position: top 0 right 18px;

0
Ở đây, hình nằm ở đầu trang, lấy toàn bộ chiều rộng của nó. Hình ảnh (chỉ nội dung trong đó) có kích thước chính xác là cao 
object-position: position
41
Trang có định vị và định cỡ cẩn thận
Sẽ không có trùng lặp miễn là chúng tôi đảm bảo nội dung sau đây có lề trên 
object-position: position
41 hoặc lớn hơn. Chọn cái đó trước
khó khăn vì cách cấu trúc HTML, nhưng nó thể hiện ý định ở đây
Có những giá trị khác có thể được trao cho 
#happy {
  float: right;
}
6. Mặc định là 
object-position: position
44. Sử dụng 
object-position: position
45 hoạt động giống như 
object-position: position
44 nhưng bạn có thể điều chỉnh vị trí của phần tử tương ứng với vị trí của phần tử đó.
Cài đặt 
object-position: position
47 giống như 
object-position: position
48, nhưng liên quan đến cửa sổ. những thứ cố định sẽ không di chuyển khi người dùng cuộn. Thậm chí còn có nhiều cơ hội hơn cho nội dung không mong muốn trùng lặp theo cách đó
Vị trí bạn đưa ra (với 
float : none|inherit|left|right|initial
01, 
float : none|inherit|left|right|initial
03, v.v.) cho phần tử được định vị tuyệt đối thường liên quan đến toàn bộ trang. trên cùng của toàn bộ trang, bên trái của trang, v.v. Điều này không đúng nếu bất kỳ phần tử nào chứa phần tử được định vị thì chính nó được định vị. Thủ thuật này đã được sử dụng trên trang ví dụ để làm cho mọi thứ trôi nổi/được định vị trong ví dụ. các
đã áp dụng 
object-position: position
45, không phải để di chuyển nó mà để làm cho nó chứa vật nổi/được định vị bên trong nó
Khó khăn định vị
Như bạn có thể nhận thấy trong phần này (và trong khi thực hiện các bài tập), định vị mọi thứ theo cách bạn muốn trong CSS có thể khó khăn
Sử dụng 
!

  
    
  

  
    
      
    
  

4 đủ dễ dàng nếu bạn đang làm những gì nó được thiết kế cho. hình nổi bên cạnh nội dung khác. Nếu bạn đủ may mắn để biết chính xác nội dung của mình lớn đến mức nào, thì có thể sử dụng 
#happy {
  float: right;
}
6 mà không gặp quá nhiều khó khăn
Tuy nhiên, có nhiều cách khác mà bạn có thể muốn sắp xếp nội dung, nơi không rõ ràng ngay lập tức về cách đạt được chúng với 
!

  
    
  

  
    
      
    
  

4 hoặc 
#happy {
  float: right;
}
6. một menu trong một cột ở bên trái của nội dung khác; 
Trong CSS Frameworks, chúng ta sẽ khám phá một số công cụ giúp định vị và định kiểu nội dung dễ dàng hơn
 

			
Làm cách nào để di chuyển hình ảnh trong CSS?
			
Cách di chuyển hình ảnh trong CSS . 
 
Sử dụng thuộc tính Object-Position
 
ví dụ 1. Vị trí đối tượng. trung tâm hàng đầu
 
ví dụ 2. Vị trí đối tượng. Trên bên trái
 
ví dụ 3. Vị trí đối tượng. Trên cùng bên phải
 
Ví dụ 4. Vị trí đối tượng. Ban đầu
 
Sử dụng tài sản nổi
 
		
			
Làm cách nào để định vị một hình ảnh trong CSS?
			
Bạn có thể dễ dàng định vị hình ảnh bằng cách  sử dụng thuộc tính vị trí đối tượng . Bạn cũng có thể sử dụng nhiều cách khác như thuộc tính float sẽ được thảo luận thêm trong bài viết này. phương pháp. thuộc tính vị trí đối tượng. Chỉ định cách định vị phần tử hình ảnh với tọa độ x, y bên trong hộp nội dung của nó. 
		
			
Làm cách nào để căn chỉnh hình ảnh trong CSS?
			
Để căn giữa hình ảnh bằng Lưới CSS,  bọc hình ảnh trong phần tử div vùng chứa và hiển thị lưới.  Sau đó, đặt thuộc tính place-items thành trung tâm . P. S. các mục vị trí có giá trị trung tâm căn giữa mọi thứ theo chiều ngang và chiều dọc.