Hướng dẫn css move image down - css di chuyển hình ảnh xuống

Tôi đang phát triển một trang web cho hình ảnh trên băng chuyền. Làm thế nào tôi có thể di chuyển một hình ảnh xuống trong một div, hoặc thậm chí giữa nó theo chiều dọc?

Đây là mã CSS của tôi:

.carousel .item {
  height: 900px;
  background-color: #777;
}
.carousel-inner > .item > img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Đây là một URL cho trang web được đề cập để cho bạn thấy rằng hình ảnh quá cao: http://www.canninginc.co.nz/canluciddream/screenshots.html

CHỈNH SỬA

OK, tôi đã chỉnh sửa mã bằng cách thay đổi:

margin-top: 50px;

Tôi vẫn còn sau hình ảnh thấp hơn trong div. Tôi có thể tăng biên trên cùng, nhưng điều này để lại một nền trắng. Điều gì sẽ là cách tốt nhất để di chuyển hình ảnh thấp hơn một chút?

Hỏi ngày 13 tháng 9 năm 2013 lúc 4:39Sep 13, 2013 at 4:39

Trước hết làm cho vị trí .Item tương đối và sau đó trên CSS:

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

Điều này sẽ tập trung vào hình ảnh theo chiều dọc

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 5:14Sep 13, 2013 at 5:14

bring2dipbring2dipbring2dip

8662 Huy hiệu vàng10 Huy hiệu bạc21 Huy hiệu đồng2 gold badges10 silver badges21 bronze badges

Cung cấp cho lề đầu 130px cho hình ảnh và nó trông rất tuyệt!

margin-top: 130px;

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 4:49Sep 13, 2013 at 4:49

AshwinkumarsashwinkumarsAshwinKumarS

1.27310 Huy hiệu bạc12 Huy hiệu đồng10 silver badges12 bronze badges

Đặt hình ảnh bên trong thân chính, đặt thân chính thành vị trí: tương đối, sau đó đặt hình ảnh thành vị trí: tuyệt đối; Top: 0; Trái: 0;

Nếu bạn không thể đặt hình ảnh vào bên trong thân chính, thì hãy thêm một tỷ lệ lợi nhuận âm vào thân chính.

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 4:48Sep 13, 2013 at 4:48

Vấn đề của bạn không phải là hình ảnh được đặt quá cao - nó là tiêu đề cố định. Vì vậy, đặt margin-top:50px thay vì -80px cho .myCarousel.

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 4:49Sep 13, 2013 at 4:49

AshwinkumarsashwinkumarsCthulhu

1.27310 Huy hiệu bạc12 Huy hiệu đồng1 gold badge13 silver badges25 bronze badges

Đặt hình ảnh bên trong thân chính, đặt thân chính thành vị trí: tương đối, sau đó đặt hình ảnh thành vị trí: tuyệt đối; Top: 0; Trái: 0;

Nếu bạn không thể đặt hình ảnh vào bên trong thân chính, thì hãy thêm một tỷ lệ lợi nhuận âm vào thân chính.Sep 13, 2013 at 4:50

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 4:48Bardicer

Vấn đề của bạn không phải là hình ảnh được đặt quá cao - nó là tiêu đề cố định. Vì vậy, đặt margin-top:50px thay vì -80px cho .myCarousel.3 gold badges28 silver badges43 bronze badges

Thuộc tính position chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, cố định, tuyệt đối hoặc dính).

Thuộc tính vị trí

Thuộc tính position chỉ định loại phương thức định vị được sử dụng cho một phần tử.

Có năm giá trị vị trí khác nhau:

• static
• relative

• margin-top: 50px;
  

  0

• margin-top: 50px;
  

  1

• margin-top: 50px;
  

  2

Các phần tử sau đó được định vị bằng các thuộc tính trên, dưới, trái và bên phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính position được đặt đầu tiên. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.

Vị trí: tĩnh;

Các phần tử HTML được định vị tĩnh theo mặc định.

Các phần tử định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và bên phải.

Một yếu tố với

margin-top: 50px;

Yếu tố này có vị trí: tĩnh;

Đây là CSS được sử dụng:

Vị trí: tương đối;

Một yếu tố với

margin-top: 50px;

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

Đây là CSS được sử dụng:

Thí dụ

Vị trí: tương đối;
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

Một yếu tố với margin-top: 50px; 5 được định vị so với vị trí bình thường của nó.

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Thí dụ

Vị trí: Đã sửa;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

Một phần tử có

margin-top: 50px;

Một phần tử cố định không để lại một khoảng trống trong trang nơi nó thường được đặt.

Lưu ý phần tử cố định ở góc dưới bên phải của trang. Đây là CSS được sử dụng:

div.Fixed {& nbsp; Vị trí: Đã sửa; & nbsp; Dưới cùng: 0; & nbsp; Phải: 0; & nbsp; chiều rộng: 300px; & nbsp; Biên giới: 3px rắn #73ad21;}

Yếu tố này có

margin-top: 50px;

Vị trí: Tuyệt đối;

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Đây là CSS được sử dụng:

Thí dụ

Vị trí: tương đối;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

Một yếu tố với

margin-top: 50px;

Hãy tự mình thử »

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Lưu ý: Internet Explorer không hỗ trợ định vị dính. Safari yêu cầu tiền tố -webkit- (xem ví dụ bên dưới). Bạn cũng phải chỉ định ít nhất một trong số

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

Trong ví dụ này, phần tử dính dính vào đầu trang (

.carousel-inner > .item > img {
    position:absolute;
    top:25%;
    left:25%;
} 

Thí dụ

div.sticky {& nbsp;Vị trí: -Webkit -sticky;/ * Safari */& nbsp;Vị trí: Sticky; & nbsp;Top: 0; & nbsp;màu nền: màu xanh lá cây; & nbsp;Biên giới: 2px rắn #4caf50;}
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Hãy tự mình thử »

Định vị văn bản trong một hình ảnh

Cách định vị văn bản trên một hình ảnh:

Nhiều ví dụ hơn

Đặt hình dạng của một phần tử Ví dụ này thể hiện cách đặt hình dạng của một phần tử.Các yếu tố được cắt thành hình dạng này, và hiển thị.
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

Tất cả các thuộc tính định vị CSS