我正在尝试创建一个在桌面上左对齐但在移动设备上居中对齐的按钮。不知何故，当我使用下面的代码时，我看到的唯一变化是按钮正在根据屏幕调整它的大小，但它没有居中。我做错了什么？
<!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>最佳答案
您的表格 CSS 有问题，因为它只有 50% 的宽度，不允许您移动或居中对齐。
将下面的表格 CSS 放在媒体代码中，它会帮助您。
@media only screen and (max-width: 480px) {
table {
margin : 0 auto;
}
.centeredButton {
text-align: center;
}
}
关于html - 基于媒体查询的中心按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57712865/