css - 如何使按钮与我的图像对齐

Question

我想让这种看起来不错，我正在尝试使用 JavaScript 的滑块。我的按钮位于图像的两侧，但不在中心，它们位于底部。我怎样才能让他们并排？

html{
    height: 100%;
    display: table;
    margin: auto;
}

body{
    background-color: #FFFC35;
    display: table-cell;
    vertical-align: middle;
}
#slider{
    height: 100%;
}

.btn{
    border: 2px solid black;
    background:  #4b5052;
    color: white;
    align-items: center;
    font-size: 16px;
    padding: 8px;
}

<div>
    <button onclick="prev()" class="btn"> Prev </button>
    <img id="slider" src="1.jpg" width="200px" height="100px"/>
    <button onclick="next()" class="btn"> Next </button>
</div>

标签： css

Answer 1

你应该避免display: table-cell;这样使用。尤其是在body. 对于这样的事情，你应该看看“Flexbox”。有了display: flex;您，您可以轻松地居中元素。

看看这个例子：

body{
    background-color: #FFFC35;
    margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#slider{
    height: 100%;
}

.btn{
    border: 2px solid black;
    background:  #4b5052;
    color: white;
    align-items: center;
    font-size: 16px;
    padding: 8px;
}

<div class="wrapper">
  <div class="container">
      <button onclick="prev()" class="btn"> Prev </button>
      <img id="slider" src="https://placehold.it/500" width="200px" height="100px"/>
      <button onclick="next()" class="btn"> Next </button>
  </div>
</div>