使用CSS将一个元素置于另一个元素中（Bootstrap）

Question

我通过Bootstrap将<a>元素设置为按钮。我希望它下面的文本与按钮居中对齐。我该怎么做呢？我尝试使用<center>标记将文本本身居中，但是这会将其移动到父级（<div id="parent">）的中心，而不是按钮的中心。这就是我现在所拥有的：

<div id="parent">
    <a href="/personalised-payment-page/" class="btn btn-info btn-lg btn-raised" style="max-width: 300px !important;">CREATE YOURS NOW</a><br>
    <b style="color: #388e3c;">(FREE - LIMITED PERIOD)</b>
</div>

目前看起来像这样

我希望它看起来像这样：

编辑：我应该强调，我根本不想让按钮移动，只需要下方的绿色<b>文字，以便在按钮下居中。

Answer 1

将以下CSS添加到您的页面。

#parent {
    display: inline-block;
    text-align: center
}

您还可以使用以下内容。我对你的其余代码知之甚少，无法确定最佳代码。

int categoryIdIndex = 7;
int productIdIndex = 3;
int quantityRequestedIndex = 5;

List<string> errors = new List<string>()
for (int index = 0; index < this.gridagree.Rows.Count; index++)
{
  Row row = gridagree.Rows[index];
  int categoryId = Convert.ToInt32(row.Cells[categoryIdIndex].Text);
  int productId = Convert.ToInt32(row.Cells[productIdIndex].Text);
  int quantityRequested = Convert.ToInt32(row.Cells[quantityRequestedIndex].Text);
  int availableQuantity = s.getprodqun(productId);

  if(quantityRequested > availableQuantity)
  {
    errors.Add(string.Format("Inventory contains insufficient items for product id {0} ", productId));
  }
}

if(errors.Count == 0)
{
  ... process the orders ...
}
else
{
  ... show the errors
}

Answer 2

使用<a>属性将<b>和display:inline-block标记包裹在text-align:center元素中：

<div id="parent">
    <span style="display:inline-block;text-align:center;">
        <a href="/personalised-payment-page/" class="btn btn-info btn-lg btn-raised" style="max-width: 300px !important;">CREATE YOURS NOW</a><br>
        <b style="color: #388e3c;">(FREE - LIMITED PERIOD)</b>
    </span>
</div>

OBS：避免使用内联样式

Answer 3

<div>
<?php
function footer() {
    $string = "</div>";
    $string .= "<my-footer></my-footer>";
    return $string;
}
if (isset($_POST["submitted"])) {
    if (!isValidEmail($_POST["email"])) {
        echo "<p>Please enter a valid email address.</p>";
        die(footer()); // Displays footer
    }
    if (!isValidPhoneNumber($_POST["phoneNumber"])) {
        echo "<p>Please enter a valid phone number.</p>";
        die(footer()); // Displays footer
    }
    ...
    if (updateUser($id, $email, $phoneNumber, $name)) {
        echo("<meta http-equiv='refresh' content='0'>");
    } else {
        die("<p>An error occurred! Could not update your profile information!</p>" . footer()); // kills the page execution, but still returns the foot of the page.
    }
}

echo footer();

?>

Answer 4

只需使用：

#parent {
    text-align: center
}

正如已经说过的中心已被弃用。

Answer 5

如果您希望明确地保持300px宽度的按钮，我会使用此模式：

<div id="parent">
  <div style="max-width: 300px !important;" class="text-center">
    <a href="/personalised-payment-page/" class="btn btn-info btn-lg btn-raised btn-block" >CREATE YOURS NOW</a>
    <b style="color: #388e3c;">(FREE - LIMITED PERIOD)</b>
   </div>
</div>