Question

我已经设置了“滑动”滑块，以在登录页面上显示图像轮播。我已经读过，为了在转盘上有按钮，我不得不在CSS中将position: absolute和z-index: 1替换为通用。这使我的旋转木马占据了整个视口，但是我似乎无法重新定位按钮甚至使其居中。通常将text-align: center;置于按钮中央，但在这种情况下似乎不起作用。我正在使用jQuery Mobile库。

如何重新设置按钮的位置，使它们始终出现在视口的中心，以及如何更改按钮的宽度？

Image Desc. A. My Login page at the minute. B. Where I would like my buttons to be, preferably responsive to take up a % of the viewport. C & D. I can center the buttons in dev tools when I turn off the absolute positioning, but it pushes my slider widget down and does not let the buttons be pushed forward on the z-index. 2

HTML：

<body>

<!-- Buttons -->
<div id="LandingButtons">
    <button class="ui-btn ui-btn-inline">Sign Up</button>
    <button class="ui-btn ui-btn-inline">Log In</button>
</div>

<!-- HTML for images -->
<div class="your-class" ">
      <div> <img src="img/slider/step1.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step2.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step3.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step4.png " alt=" " style="width: 100vw; height: 100vh; "></div>
    </div>


<!-- slick.js -->
<script type="text/javascript " src="http://code.jquery.com/jquery-1.11.0.min.js "></script>
<script type="text/javascript " src="http://code.jquery.com/jquery-migrate-1.2.1.min.js "></script>
<script type="text/javascript " src="slick/slick.min.js "></script>


<!-- External JS file Initializes the slider  -->
<script type="text/javascript " src

CSS：

#LandingButtons{
    text-align: center;
    position: absolute;
    z-index: 1;
}

Answer 1

您可以执行以下转换：translateY（-50％）;顶部：50％的组合使其到达屏幕中间

#LandingButtons {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

我希望这会对您有所帮助

Answer 2

好像您忘记使用margin auto会帮助您使div居中对齐：new_df = df.applymap(try_to_int)

Answer 3

如果您想将元素水平和垂直居中放置，可以使用此代码，它将对您有所帮助。另外，如果某物定位为绝对位置，则无需使用z-index。

.center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这应该足够了，如果您对该div使用绝对位置，请不要忘记为div设置相对位置。

如何使用z-index和绝对位置将行内按钮居中？

3 个答案: