时间戳

首页 > 解决方案 > 按钮不为移动设备调整大小

html - 按钮不为移动设备调整大小

问题描述

道歉。在一些帮助之后，我无法让按钮居中并正确安装在移动设备上。我有一个隐藏的 div，所以当你点击它出现的按钮时，它似乎工作正常。我认为我没有很好地构建 CSS，所以任何帮助都将不胜感激。谢谢。

HTML

<div class="container">
   <button type="button" data-toggle-page="#home" class="button">Home 
   designing</button>
</div>
<div id="home" class="page">
   <div class="section">
      <h2 class="kitchen">Kitchen</h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Lounge">Lounge</a></h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Dining">Dining room</a></h2>
   </div>
   <div class="section">
      <h2><a style="text-decoration: none" href="Hall">Hallway</a></h2>
   </div>
</div>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    background: url(image.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.container {
    text-align: center;
    max-width: 100%;
}

.button {
    background-color: rgba( 0, 0, 0, 0);
    /*    text-align: center;*/
    margin-top: 200px;
    font-size: 100px;
    color: #fff;
    font-family: 'Montserrat Subrayada', sans-serif;
    border: none;
    outline: none;
}

.page {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    text-align: center;
}

标签： htmlcsstwitter-bootstrap

解决方案

您可以使用flexbox使元素居中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 100%;
}

align-items: center;将垂直居中。

justify-content: center;将水平居中。

推荐阅读