Question

我的代码如下，我只想对齐所有内容，但我无法弄清楚它不会像所有其他div一样工作。

EDIT;添加了上面的HTML。这可能是影响模型的原因，但我无法弄清楚为什么...... grrrr

而且，我没有CSS，唯一的CSS文件是用于不同div的表单。其他一切都在线上。

--------------
<div id="softphone-enable" style="float: right; position: relative; top: -15px">
    <p>&nbsp;</p>
        <label>Enable: </label>
        <input name="sft-enable" id="sft-enable" type="checkbox" value="0">
    <p>&nbsp;</p>
 </div>
--------------
 <div class="section">Provisioning</div>

    <div id="softphone-main">

      <div id="softphone-links" style="text-align: center;>

        <a href="https://play.google.com" target="_blank">

          <img id="android-img" style="height: 60px; width: 200px;"  border="0" src="/Images/google-play-badge.png" alt="android" /></a>

        <a href="https://itunes.apple.com/" target="_blank">

          <img id="osx-img" style="height: 60px; width: 200px;"  border="0" src="/Images/app-store-badge.png" alt="osx" /></a>
      </div>
    </div>
  </div>

Answer 1

试试这个：

<div id="softphone-enable" style="text-align: center">
    <p>&nbsp;</p>
    <label>Enable: </label>
    <input name="sft-enable" id="sft-enable" type="checkbox" value="0">
    <p>&nbsp;</p>
</div>

<div class="section">
    <div style="text-align: center">Provisioning</div>
</div>
<div id="softphone-main">

    <div id="softphone-links" style="text-align: center;">

        <a href="https://play.google.com" target="_blank">

            <img id="android-img" style="height: 60px; width: 200px;" border="0" src="/Images/google-play-badge.png" alt="android" /></a>

        <a href="https://itunes.apple.com/" target="_blank">

            <img id="osx-img" style="height: 60px; width: 200px;" border="0" src="/Images/app-store-badge.png" alt="osx" /></a>
    </div>
</div>

Answer 2

如果没有您的CSS，我们无法直接正确回答问题。最有可能的是，如果尝试居中，您的锚标记将设置为阻止级别元素。

如果你的图像没有以margin为中心：0 auto，那可能是因为它们是内联元素。将它们设置为阻止，这应该有助于解决问题。另外，text-align：center;关于锚标签将是一个很好的后备。

<a href="#" class="block">
  <img src="http://placehold.it/350x150">
</a>
<a href="#" class="block">
  <img src="http://placehold.it/350x150">
</a>

a.block {
  width: 500px;
  display: block;
  background: white;
  /* text-align: center; */
}
a.block img {
  display: block;
  margin: 0 auto;
}

https://jsfiddle.net/keq85yao/

Answer 3

试试这个：

  #softphone-links a{
    display:block;
  }

  #softphone-links img{
     margin: auto;
  }

Answer 4

与图像的链接似乎在中心对齐。您的CSS中可能会有一些内容覆盖您提供的代码。

Answer 5

感谢您提供有用的帖子，我刚刚删除了一些愚蠢的遗留代码，现在我已经将它与之合作了;

<div id="softphone-enable" style="float: right; position: relative; top: -5px">
    <label>Enable: </label>
    <input name="sft-enable" id="sft-enable" type="checkbox" value="0">
</div>

<div class="section">Provisioning</div>

<div id="softphone-main">
<div id="sft-links" style="text-align: center;">
//etc...

至于为什么顶部会影响下面的div放置，我会责怪

<p>&nbsp;</p>

为什么我不能将这两个图像置于div支架中？

5 个答案: