javascript - 绝对定位不适用于 Javascript DIV

标签 javascript jquery css

我使用了一些从网页底部向上滑动 DIV 的 Javascript,并且我试图将它定位在绝对底部中心。

底部的 DIV 似乎在左下角,无论浏览器窗口大小如何,我都试图让它居中。

我会查看此 URL 以查看有问题的页面:http://s361608839.websitehome.co.uk/oneonly/index.html

HTML:

<div class="slide-out-div">
  <a class="handle" href="http://link-for-non-js-users">Content</a>
  <a href="mailto:name@domain.com">name@domain.com</a><br /><br />
  <p>Address</p>
  <p>Telephone</p>
</div>

CSS:

.slide-out-div {
  padding: 20px;
  width: 276px;
  background: url(images/kontakt-bg.png);
  color: #fff;
}

JS:

$(function(){
  $('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                        //class of the element that will be your tab
    pathToTabImage: 'images/kontakt-tab.png',    //path to the image for the tab (optionaly can be set using css)
    imageHeight: '26px',                         //height of tab image
    imageWidth: '316px',                         //width of tab image    
    tabLocation: 'bottom',                       //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                  //speed of animation
    action: 'click',                             //options: 'click' or 'hover', action to trigger animation

    fixedPosition: false                         //options: true makes it stick(fixed position) on scroll
  });
});

谢谢!

最佳答案

添加

left: 50%;
margin-left: -138px; /* half its width which you have set to be 276px */

.slide-out-div(在通过开发者工具进行实时编辑时对我有用)。

关于javascript - 绝对定位不适用于 Javascript DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12370186/

相关文章:

javascript - 某些功能在 .append 之后不起作用

javascript - 如何在悬停时向元素添加类,但当您离开鼠标时类保留

css - 如何在同一容器中将标题居中对齐,文本居左对齐?

css - 多个类中的逗号和空格在 CSS 中是什么意思?

javascript - 遍历 HTML 结构搜索属性

javascript - 检查数组是否包含任何另一个字符串数组

javascript - 如何使二十面体上的三 Angular 形侧面积增加和减少,而不保留形状 "intact"?

javascript - 从下一个 div 的子元素中选择输入类型文本

javascript - 尝试使用 jQuery 检索部分 URL;它有效,但未返回字符串

php - Web 文件夹重命名后 Symfony2 资源无法工作