html - 在 CSS 中水平对齐图像？

Question

试图水平对齐两个图像，但它不起作用:

HTML

    <div data-role="page" id="development">
  <div data-role="header">
    <h1>Develop</h1>
  </div>
  <div id="images">
  <p><img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" </p>
  <p><img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"</p>
  </div>
  <div data-role="main" class="ui-content">
    <a href="../index.html" data-transition="slide" data-direction="reverse">Back</a>
  </div>
</div> 

CSS

#images {
   display: block;
    margin: 0 auto;
    clear: right;
}

我在网上找到了其他答案，但无法实现它们。有什么帮助吗？

Answer 1

<p>是 block 级元素。要让图像水平并排放置，请使用:

p {
    display:inline;
}

jsFiddle example