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!
webstuck5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

duncanb7Commented:
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

0
webstuck5Author Commented:
I thought tables were being phased out. Is that not the case?
0
stevejacob68Commented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

duncanb7Commented:
Why and where it mention table will phrase out ?
0
duncanb7Commented:
set div tag  to  width:1%  that  will let the
inner div an auto width and hidden overflow and set its width  from the top image, Please try this, probably it works without using any <table> tab
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>
	   
	  <div style="width:1%;display:table">
	  <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="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>
	   </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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
>>>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&
0
rbudjCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.