为什么我的复选框在其父级中未垂直对齐? [英] Why is my checkbox not vertically aligned in it's parent?

问题描述

我有一个使用此CSS代码的复选框:

I have a checkbox with this css code:

.row-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  margin-top: -9px;
}

它的父元素是具有position:relative;的元素. 我在Edge浏览器中垂直居中放置复选框时遇到问题(在chrome中工作正常).似乎top:50％的浏览器都不能使用，但是chrome中的某些内容仍然使它居中.

It's parent is a element with position: relative;. I'm having problems vertically centering the checkbox in Edge browser (in chrome works fine). It seems that the top:50% isn't working in either browsers, but something in chrome still makes it centered.

我不想进行较大的更改，例如更改为flex，因为我在项目中都拥有这些元素，我只想添加一个修复程序来支持Edge.

I don't want to change make a big change like changing to flex because I have these elements all over my project, I would just want to add a fix to support Edge.

我已经尝试解决几个小时了，很多事情都没用.

I've been trying to solve it for hours now, a lot of things that didn't work.

推荐答案

代替

margin-left: -12px;
margin-top: -9px;

只需使用转换即可

transform: translate(-50%, -50%);

这(连同position: absolute; top: 50%; left: 50%;和 positioned 父级)是一种通用方法，可将任何元素居高放置，而不论其高度和宽度如何.

This (along with position: absolute; top: 50%; left: 50%; and a positioned parent) is a universal approach of centering any element regardless of its height and width.

这篇关于为什么我的复选框在其父级中未垂直对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！