html - 将按钮和文本居中放置在第二个按钮的右侧但不居中

Question

我有一个弹出窗口，其中有一个多行文本框，下面有 2 个按钮。取消和保存。

我有:

<div style="width: 650px;">
    <div style="padding-top: 10px; text-align: center">
        <asp:TextBox ID="TxtTest" Width="530px" TextMode="MultiLine" Style="word-wrap: break-word; height: 200px; overflow: auto; vertical-align: top" runat="server" AutoComplete="off" />
        <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" WatermarkCssClass="textwatermarkNotes" TargetControlID="TxtOther" WatermarkText="Please enter a message here..." runat="server" />
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px; text-align: center;">
        <asp:Button ID="BtnCancel" OnClick="btnCancel_click" CssClass="buttonSmall" CausesValidation="false" Text="Cancel" runat="server" OnClientClick="EncodeText()" />&nbsp;&nbsp;
        <asp:Button ID="BtnSave" runat="server" CssClass="buttonSmall" Text="Save" OnClick="btnSave_Click" />
    </div>
    <div>
        <asp:Label Width="130px" ID="txtCharMax" Text="" runat="server" />
    </div>
</div>

我在代码隐藏中说“最多 100 个字符”。但我希望取消和保存居中，“最多 100 个字符”位于保存的右侧。

在第 4 个 DIV 上，我认为我可以做类似的事情:

<div style="float:left">
    <asp:Label Width="130px" ID="txtCharMax" Text="">
</div> 

但这没有用。

最好/最简单的方法是什么？不使用 CSS 而使用 Style 标签？

Answer 1

尝试这样的事情:

<div style="text-align: center;">
          <button style="margin-left:100px">cancel</button>&nbsp;&nbsp;
            <button>save</button>
        <span style="display:inline-block;width:100px;">
            TEXT
        </span>
</div>

使文本内联 block 允许它与按钮对齐。然后给它一个宽度允许我们使用左侧按钮上的 margin-left 将它沿右侧分流相同的量，以便按钮显示在中央。