asked on

CSS Image Centering

I have the following code:

CSS

    ol
    {
      list-style-position:inside;
      padding:0;
    }
    li
    {
      padding:13px 0 0 0;
    }
    li:first-child
    {
      padding:0;
    }

Open in new window

HTML

  
<div id="content">
  <ol>
    <li>
      From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">--&nbsp;"Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe>
    </li>

    <li>
      When he held out his hand for mine, my heart went all a-flutter.<br><span class="attribute">--&nbsp;"Aladdin"</span><br><br><img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes &ordm;O&ordm;: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br><a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a>
    </li>

    <li>
      One look at your smile and I could see the light shining everywhere.<br><span class="attribute">--&nbsp;"Aladdin"</span>
    </li>
  </ol>
</div>

Open in new window

For the li tags that have images in them, I would like to center the pinterest pin it button under the image. I would also like it so that I could possibly add more social sharing buttons and have them all centered under the images with a small margin between them, I may also want to do more than 1 row of social sharing buttons. How can I accomplish these things?

Thanks!

duncanb7

If you want it work cross browser between FF, IE, Chrome, it may be using table tag
for top image and image under the top image, and use div tag
include the achor tag with pinterest pin image butten with style
text-align:center. You could try the following html page code for a start or reference only.
You can put style at css style tag instead of inline tag

Hope understand your question completely.If not , please point it out

Duncan

<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>
</style>

<script type="text/javascript">
$(document).ready(function() {});
</script>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content">
  <ol>
    <li>
      From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">--&nbsp;"Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe>
    </li>

    <li >
	
      When he held out his hand for mine, my heart went all a-flutter.<br>
	  <span class="attribute">--&nbsp;"Aladdin"</span><br><br>
	   <table>
	  <tr>
	  <td>
	  <img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes &ordm;O&ordm;: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br>
	  </td>
	  </tr>
	  <tr><td>
	 <div style="text-align:center">
	  <a  href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28">
	   <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png">

	  </a>
	  </div>
	  
	 </td>
	  </tr>
	  </table>
    </li>

    <li>
      One look at your smile and I could see the light shining everywhere.<br><span class="attribute">--&nbsp;"Aladdin"</span>
    </li>
  </ol>
</div>
</body>
</html>

Open in new window

webstuck5

ASKER

I thought tables were being phased out. Is that not the case?

stevejacob68

Hi,
You can define css property for an img and align center property on it.

p.center { text-align: center; }
You can apply css in similar manner and align image in center.

duncanb7

Why and where it mention table will phrase out ?

ASKER CERTIFIED SOLUTION

duncanb7

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

>>>Why and where it mention table will phrase out ?

The use of tables to manage layout has been considered not "best practice" for at least 10 years. Tables are for the presentation of tabular data. Using them for anything else is semantically incorrect; technically limiting; hurts load and rendering time; and makes responsive, adaptive, and fluid design more difficult.

W3C and virtually every authoritative source have been clear that using tables for layout is not appropriate in HTML4, XHTML, and HTML5; so unless the intent is a retro 20th century design tables are not correct for layout.

Cd&

rbudj

Try this:

<!doctype html>
<head>
<title>CSS Layout</title>
<style type="text/css">
  ol
     {
       list-style-position:inside;
       padding:0;
     }
     li
     {
       padding:13px 0 0 0;
     }
     li:first-child
     {
       padding:0;
     }


</style>
<head>
<body>
<div id="content">
   <ol>
     <li>
       From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">--&nbsp;"Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe>
     </li>

     <li>
     	<div style="width:300px;">
       	When he held out his hand for mine, my heart went all a-flutter.<br><span class="attribute">--&nbsp;"Aladdin"</span><br><br><img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes &ordm;O&ordm;: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br>

       	<div style="width:300px;text-align:center;"><a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a>

       	<a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a>

       	<a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a>

       </div>       
       </div>
     </li>

     <li>
       One look at your smile and I could see the light shining everywhere.<br><span class="attribute">--&nbsp;"Aladdin"</span>
    </li>
   </ol>
 </div>


</body>
</html>

Open in new window

I left the styles inline for easy adjusting.