[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS Image Centering

Posted on 2014-07-13
10
Medium Priority
?
411 Views
Last Modified: 2014-08-14
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!
0
Comment
Question by:webstuck5
7 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40193878
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
 

Author Comment

by:webstuck5
ID: 40193918
I thought tables were being phased out. Is that not the case?
0
 
LVL 3

Expert Comment

by:stevejacob68
ID: 40193953
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Expert Comment

by:duncanb7
ID: 40193956
Why and where it mention table will phrase out ?
0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 2000 total points
ID: 40193969
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40195348
>>>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
 
LVL 16

Expert Comment

by:rbudj
ID: 40199253
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question