以下是这种情况:
我有3个全宽度部分,它们具有垂直居中的标题和左对齐的按钮div。 当我们调整大小时,我想将按钮居中,当前位置是绝对的。
以下是我的想法: 调整窗口大小
这就是我根据这个想法编写的内容。
jQuery( window ).resize(function() {
var parentWidth =
$( ".search__btn--wrapper" ).parent().width();
var childWidth =
$( ".search__btn--wrapper" ).width();
var marginWidth =
parentWidth - childWidth;
var halfWidth =
marginWidth/2;
$( ".search__btn--wrapper" ).css("left" , halfWidth);
$( ".search__btn--wrapper" ).css("right" , halfWidth);
console.log('width is now' + $( window ).width() );
console.log('parent of button element width:' + parentWidth );
console.log('button element width:' + childWidth );
console.log('leftover margins' + marginWidth );
console.log('needed margins' + halfWidth );
});
问题到目前为止 即使我能够在每个调整大小时获得外部和内部的宽度,但由于某种原因, marginWidth 变量不会更新。 halfWidth
也是如此我也试图动态地为每个人而不仅仅是第一个工作,但那个次要的,我觉得只需要某种.each()
循环。
虽然第一部分我缺少什么? 我觉得这很简单,我只是忽略了:<
答案 0 :(得分:0)
我不明白你需要在jQuery中编写代码而不是CSS。您可以将div相对的绝对div居中:
position:absolute;
left:0;
right:0;
margin:0 auto;