jQuery - 左边距减去 div 宽度的一半答案

【问题标题】：jQuery - Margin left minus half of the div's widthjQuery - 左边距减去 div 宽度的一半
【发布时间】：2013-08-12 06:16:14
【问题描述】：

我想实现这样的目标：

我有一个没有指定宽度的 div，所以它会根据它的内容而变化。首先，我想计算那个 div 的宽度。之后，我想用 jquery 添加 css 样式，这将使该 div 左边一半的宽度。所以，如果 div 的宽度是 300px，我希望这个 css 添加到同一个 div 中：

margin-left: -150px;

我希望我很清楚。非常感谢。

【问题讨论】：

margin-left: -50%;?

标签： javascript jquery css

【解决方案1】：

使用此代码：

// get div width
var width = $('div').width();

// calculate margin size
var marginLeft = width / 2;

// set css
$('div').css('margin-left', -marginLeft);

【讨论】：

我在最后一行的 marginLeft 之前添加了一个 -（减号），它运行良好。谢谢。

【解决方案2】：

var w = $("#left-shunted-div").width();
var left_mar = -(w/2);
$("#left-shunted-div").css("margin-left",left_mar);

【讨论】：

你应该 parseInt(value, radix) 因为.css 将返回一个带有px 的字符串，而不是一个数字
根据我的经验，javascript 连接字符串和整数没有问题。
“根据我的经验，javascript 连接字符串和整数没有问题。” jsbin.com/umiruf/3/edit 嗯……你的经验也应该考虑好的建议。
感谢您让我明白这一点。起初我实际上误解了您的评论，以为您在批评另一个问题。
感谢您对我的耐心等待！

【解决方案3】：

你可以这样做：

// After dom load
$(function(){
    // Select the div
    var div = $('#myDiv');
    // Get the width;
    var width = div.outerWidth();
    // Change the margin-left to half negative 
    div.css({'marginLeft' : -(width / 2) + 'px'});
});

【讨论】：

你不需要+'px'