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>是块级元素。要使图像水平放置，请使用：

p {
    display:inline;
}

<强> jsFiddle example

Answer 2

试试这个

<div data-role="page" id="development">
  <div data-role="header">
    <h1>Develop</h1>
  </div>
  <div id="images">
      <img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" />
  <img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"
  </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: inline-block;
    margin: 0 auto;
    clear: right;
 }

在CSS中水平对齐图像？

2 个答案: