时间戳

首页 > 解决方案 > 基于媒体查询的中心按钮

html - 基于媒体查询的中心按钮

问题描述

我正在尝试创建一个按钮，该按钮将在桌面上左对齐，但在移动设备上居中对齐。不知何故，当我使用下面的代码时，我看到的唯一变化是按钮正在调整它的屏幕大小，但它没有居中。我究竟做错了什么？

<!DOCTYPE html>
<html>
<style>
  body {
  font-family: sans-serif;
}

table {
  height: 100%;
  width: 50%;
  background: red;
}

@media only screen and (max-width: 480px) {
  .centeredButton {
    text-align: center;
  }
}
</style>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <table >
      <tbody>
        <tr>
		<td class="innertd buttonblock centeredButton" bgcolor="#FFA617" style=" padding: 0px; border-radius: 99px; -moz-border-radius: 99px; -webkit-border-radius: 99px; background-color: #FFA617;">
			<a style=" font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #540021 !important; text-align: center; display: block; text-decoration: none; font-weight: bold; padding: 7px 14px; background-color: #FFA617; border: 10px solid #FFA617; border-radius: 99px; -moz-border-radius: 99px; -webkit-border-radius: 99px;"
			 target="_blank" class="buttonstyles" href=""
			 title="" alias="" conversion="true" data-linkto="https://">Stap
				nu over
			</a>
		</td>
        </tr>
      </tbody>
    </table>

    <script src="src/index.js"></script>
  </body>
</html>

标签： htmlcssmobile

解决方案

您的表格 CSS 存在问题，因为它只有 50% 的宽度，不允许您移动或居中对齐。

将下面的表格 CSS 放在媒体代码中，它会帮助你。

@media only screen and (max-width: 480px) {
   table {
    margin : 0 auto;
   }

  .centeredButton {
    text-align: center;
   }
}

推荐阅读