CODEWITHSUNDEEP
htmlcss
Adz
Adz

Reputation: 2849

Aligning images horizontally in CSS?

trying to align two images horizontally but it's not working:

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;
}

I've found other answers online but couldn't implement them to work. Any help please?

Upvotes: 0

Views: 78

Answers (2)

Shamnad P S
Shamnad P S

Reputation: 1173

Try this

<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;
 }

Upvotes: 0

j08691
j08691

Reputation: 207861

<p> are block level elements. To get the images to sit next to each other horizontally, use:

p {
    display:inline;
}

jsFiddle example

Upvotes: 2

Related Questions