我正在尝试创建一个按钮，该按钮将在桌面上左对齐，但在移动设备上居中对齐。不知何故，当我使用以下代码时，我看到的唯一变化是按钮正在根据屏幕调整其大小，但它没有居中。我做错了什么？
<!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;
}
}