CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

Images not displaying in the center of webpage

I am using the following code to display two circles in the middle of the webpage. The circles do not appear in the center of the screen. Can anyone please guide me why is this happening? Thanks. Fiddle.

<div style="background-color: orange; width: 900px; margin: 0 auto;">
    <img class=" wp-image-2531 alignleft" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
    <img class="alignnone wp-image-2533" style="clear: none; margin-left: 400px;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>
</div>

Upvotes: 0

Views: 31

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Remove margins and paddings on imgs and add text-align center on the parent, you don't need clear: none;

<div style="background-color: orange; width: 900px; margin: 0 auto;text-align: center;">
    <img class=" wp-image-2531 alignleft" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
    <img class="alignnone wp-image-2533" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>
</div>

Important :

Inline styles are a bad practice. You should add the style in a .css file.

Upvotes: 3

Javy
Javy

Reputation: 7

Remove the margins on the images and set the margin to 50% on the div.

<div style="background-color: orange; width: 900px; margin: 50%; padding-left:500px;">
<img class=" wp-image-2531 alignleft" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
<img class="alignnone wp-image-2533" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>

Upvotes: 0

Related Questions