使用CSS将一个元素置于另一个元素中(Bootstrap)

时间:2015-09-18 18:36:15

标签: html css twitter-bootstrap

我通过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>

目前看起来像这样 before image

我希望它看起来像这样: enter image description here

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

5 个答案:

答案 0 :(得分:4)

将以下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
}

答案 1 :(得分:1)

使用<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:避免使用内联样式

答案 2 :(得分:0)

<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();

?>

答案 3 :(得分:0)

只需使用:

#parent {
    text-align: center
}

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

答案 4 :(得分:0)

如果您希望明确地保持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>