Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - 变换:缩放垂直对齐的元素

In lại Tác giả: Walker 123 更新时间：2023-11-28 02:57:14 29 4
mua khóa gpt4 Nike

我有 div 元素在其他 div 元素中垂直对齐。

我使用以下方法对齐它们:position: relative;变换:翻译Y(-50%)；顶部:50%。这很好用。

我现在想缩放元素(使用 jQuery 插件“Transit”)。

当我缩放子 div 元素时，它们会移出垂直对齐(../../../wWTJSSj.png 第二个绿色框已应用 transform: scale(1.5)).

有什么办法解决这个问题吗？

câu trả lời hay nhất

听起来您好像忘记了第二个转换 Sẽ完全覆盖 原始转换。第二个转换应该是两者 transform: translateY(-50%) scale(1.5);

.container {
  chiều cao: 100vh;
  padding-top: .25em;
}

.hộp {
  height: 2em;
  width: 3em;
  background: limegreen;
  nổi: trái;
  margin: .5em;
  vị trí: tương đối;
  transform: translateY(-50%);
  trên cùng: 50%;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: translateY(-50%) scale(1.5);
}


但坦率地说，对齐技术不是必需的。使用 hiển thị: khối nội tuyến Và vertical-align:middle 或仅使用 flexbox 和 align-items:center

行内 block 

.container {
  chiều cao: 100vh;
  padding-top: .25em;
}

.hộp {
  height: 2em;
  width: 3em;
  hiển thị: khối nội tuyến;
  căn dọc: giữa;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}


hộp linh hoạt 

.container {
  chiều cao: 100vh;
  padding-top: .25em;
  hiển thị: linh hoạt;
  căn chỉnh các mục: giữa;
}

.hộp {
  height: 2em;
  width: 3em;
  background: limegreen;
  margin: .5em;
  transition: transform .3s ease;
}

.tall {
  height: 4em;
}

.box:hover {
  transform: scale(1.5);
}


关于javascript - 变换:缩放垂直对齐的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46382286/

29 4 0
Đề xuất bài viết: html - Ionic ion-nav-buttons 大小和样式
Đề xuất bài viết: javascript - 如何最好地使用 Git 共享 QooXDoo？
Đề xuất bài viết: c++ - 从函数返回时对象被销毁
Đề xuất bài viết: javascript - jQuery 键盘 z-index 模式对话框问题
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress