为什么我不能把这两个图像放在一个div支架上呢？

Question

下面的代码，我只想对齐所有的东西，但我不知道它不会像其他div那样工作。

编辑；从上面添加了HTML。这可能就是影响模型的原因，但我想不出why....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="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>

Answer 2

试试这个：

<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 3

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

如果您的图像没有以页边距为中心:0 auto，这可能是因为它们是内联元素。将它们设置为阻止，这将有助于解决问题。此外，文本对齐:居中；在锚标签上将是一个很好的退路。

<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/