Question

也许你可以帮助我，我想将按钮垂直居中和水平居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Page</title>
    <link rel="icon" type="image/ico" href="Logo.ico">
  </head>

  <style>

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

  </style>

<body>

<div class="wrapper">
    <input type="image" src="btn-system-konfiguration-orange.png">
    <input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
    <input type="image" src="btn-sensor-konfiguration-orange.png">
</div>

</body>

</html>

你有什么想法吗？解决方案可能很简单。

Answer 1

我相信如果你使用 justify-content: space-around;可以帮助使它们水平排列。

 .wrapper {
 display: flex;
 align-items: center;
 justify-content: space-around;
 }

当您尝试垂直对齐时，您需要使用 flex-direction: column;我假设您在屏幕尺寸为手机尺寸时执行此操作，因此我会将其添加到最大为 400 的媒体查询中或沿着这些 lins 的内容

  .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

Answer 2

添加

html,
body {
  height: 100%;
}

在这种情况下，html 和 body 需要定义高度。

工作笔：https://codepen.io/vas131/pen/yLgydxN

如何并排居中三个按钮

2 个答案: