javascript - 尽管与 img 具有相同的 css 属性，ul 仍不会居中

Question

https://codepen.io/saintnicks78/pen/BRgYbg 图像使用与 .centered 相同的属性正确居中(此处使用 .fade )，但 ul 元素更靠右，即使顶部和左侧使用 .centered 设置为 50%

ul {
    position: relative;
    top: 200px; left: 200px; /*for example purposes only*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;



}
li {

    position: absolute;
    color:white;

    font-size: -rem(10px);
    letter-spacing: 0.3em;
    color: rgba(223,190,106,0.7);
    background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(0,0,0,0), rgba(0,0,0,0));
    background-position: 1% 50%;
    background-size: 100% 100%;
    margin: -rem(10px);
    border: 1px solid rgba(223,190,106,0.3);
    padding: 5px 5px 5px;



    display:none;

  }

.centered {
  position: fixed;
  top: 50%;
  left: 50%;

  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  border-radius: 50%;

  }

html/ Jade :

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
h1.left My
  h1.
  body(style='background-color:black')
  p
    a.fade(href="#")
     img.fade(src='http://data.whicdn.com/images/18140107/large.jpg', 
 height='150', width='200')

  p 
    ul.centered
      li.none
      li Chapter 1 
      li Chapter 2
      li Chapter 3
      li Chapter 4
      li Chapter 5
      li Chapter 6
      li Chapter 7
      li Chapter 8
      li Chapter 9
      li Chapter 10

js:

var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
    radius = '22em', //distance from center
    start = -90, //shift start from 0
    $elements = $('li:not(:first-child)'),
    numberOfElements = (type === 1) ?  $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle
    slice = 360 * type / numberOfElements;

$elements.each(function(i) {
    var $self = $(this),
        rotate = slice * i + start,
        rotateReverse = rotate * -1;

    $self.css({
        'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
    });


});



$('.fade').on('click', function() {
   $('.centered li').each(function(i){
        $(this).delay(500 * i).fadeIn(1500)




      })
  })

Answer 1

你的图像有变换:

translate(-50%, -50%); 

它将顶部/左侧坐标放在中心而不是使用图像的左上角。

<li> s 没有这个，所以根据它们的左上角定位(如果它们更高，您还会看到它们在垂直方向上偏离直线/偏离中心以及水平方向)。

js $self.css transform 正在覆盖 css，因此也必须应用，但特别是在围绕圆圈的定位之后:

$self.css({
    'transform': 'rotate(' + rotate + 'deg)' + 
                 ' translate(' + radius + ')' +
                 ' rotate(' + rotateReverse + 'deg)' + 
                 ' translate(-50%, -50%)'
});

将此添加到您的代码笔中，它将按预期显示。