如何使用HTML或CSS将此按钮居中

ktca8awb 于 2023-01-27 发布在其他

关注(0)|答案(5)|浏览(114)

除了在Code Academy上的几堂课外，我没有任何HTML或CSS编码经验，但我工作的公司让我负责修复我们废弃的购物车电子邮件。唯一能修复的方法是调整HTML和CSS，我有点不知所措。我正在尝试找出如何使用旧形式的CSS（提供的模板）将按钮居中。
按钮模板上的代码

<table class="row">
                                <tr>
                                    <th class="column">
                                        <table class="complete-order">
                                            <tr>
                                                <th>
                                                    <p>
                                                        <a href="{{notification.checkout_link}}" target="_blank">
                                                            {{lang 'complete_order'}}
                                                        </a>
                                                    </p>
                                                </th>

                                                <th class="expander"></th>
                                            </tr>
                                        </table>
                                    </th>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

有人在评论中给出的解决方案是使用下面的代码，但我不认为我把它放在正确的位置，因为它把整个电子邮件分为两半...哈哈。

<table class="complete-order">
<tr>
<td>
<p>
To complete your order right now, just click on link below.
</p>
<p>
<a href="#">Complete Order</a>
</p>
</td>
</tr>
</table>

有人能帮我把这个扣子扣在中间吗？

css

来源：https://stackoverflow.com/questions/75240777/how-do-i-center-this-button-using-html-or-css

5条答案

按热度按时间

nkkqxpd91#

.complete-order{text-align:center;}
.complete-order a{
background-color:#8cb84a;
border:none;
border-radius:4px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:#fff;
display:inline-block;
font-weight:600;
padding:8px 32px;
text-align:center;
white-space:nowrap;
text-decoration:none;

}

<table class="complete-order">
<tr>
<td>
<p>
To complete your order right now, just click on link below.
</p>
<p>
<a href="#">Complete Order</a>
</p>
</td>
</tr>
</table>

赞(0）回复(0）举报 2023-01-27

7kjnsjlb2#

.button{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

<button class='button'>Center button</button>

赞(0）回复(0）举报 2023-01-27

gfttwv5a3#

你可以将你的表格与类行放在中间。如果在邮件头没有其他CSS来覆盖这个，那么它应该可以完美地工作。
变更：

<table class="row">

致：

<table align="center" class="row">

赞(0）回复(0）举报 2023-01-27

xzlaal3s4#

我看到你在用表格做布局，这是一个老方法了。今天的标准建议你用网格或弹性框。
要使元素居中并留有边距，请指定要居中的元素的宽度。然后，您可以执行以下操作：（W3Scrools中的示例：https://www.w3schools.com/css/tryit.asp?）

.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}

你也可以看看凯文，他有一个YouTube频道，他教CSS和HTML.https://www.youtube.com/watch?v=ULVu2VNM_54我想你会发现它最有用。
编程愉快。

赞(0）回复(0）举报 2023-01-27

nbewdwxp5#

尝试使用边距：auto;这样可以让你的两边有相同的边距。如果不起作用，增加宽度：百分之五十。

赞(0）回复(0）举报 2023-01-27

我来回答

如何使用HTML或CSS将此按钮居中

5条答案

相关问题

热门标签

最新问答