Question

<div class="sc-content-footer container">
<div class="row">
<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

<div class="col-md-4">
<img src="images/BSY_LOGO_SIGNAGE.png">
</div>

<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

似乎没什么用，text-align：center什么都不做。 3个div中的内容是：mailchimp form，logo，mailchimp form

Answer 1

在外部DIV的css中：

职位：相对;

和内部DIV

位置：相对;保证金：0自动;

试试这个，这是正确的形式。

Answer 2

text-align: center仅在您对齐的元素具有display: inline-block时才有效。

此外，text-align: center不在您要对齐的元素上，而是在您要对齐的元素的父元素上。

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.outer {
  blackground-color: yellow;
  width: 100%;
  text-align: center;
}

<div class="outer">
<div class="inner">

</div>
</div>

Answer 3

...我希望我在这里问之前花了一点时间。我向大家道歉，我是网页设计的新手，我很沮丧。不会再发生。

问题是Mailchimp的自定义CSS。我从表单HTML中删除了CSS样式表导入，并将Bootstrap类添加到文本框和按钮中。现在一切都很好，花花公子。

Answer 4

<div>标签嵌套时变得棘手，但请尝试：

.container
{         
     width: 50%; 
     margin: 0 auto;
}

.row
{
   display: inline-block;
   text-align: center;
}

Answer 5

由于您使用的是Bootstrap，因此您只需使用Bootstrap类（文本中心）来对齐div内容。

将代码编辑为以下内容：

<div class="sc-content-footer container text-center">
<div class="row">
<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

<div class="col-md-4">
<img src="images/BSY_LOGO_SIGNAGE.png">
</div>

<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>
</div>
</div>

如果您在运行上述代码后仍遇到问题，也可以将文本中心类放在子div中。

如何居中对齐div的内容？

5 个答案: