Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Centering with CSS

Posted on 2010-01-08
18
Medium Priority
?
104 Views
Last Modified: 2013-09-01
I have a webpage with an embedded iframe which displays images of various sizes when a thumbnails is selected.  The dimensions of the iframe are 602px by 602px.  What CSS code do I need to  include so that image currently displayed is horizontally centered (left to right) and vertically top-justified?  Thanks,

Paul
0
Comment
Question by:pcareyjr
  • 5
  • 5
  • 2
  • +5
17 Comments
 
LVL 1

Expert Comment

by:niclassahlin
ID: 26213571
You can place the <iframe> inside a <div> that is as wide as the page and set the text-align property to center:

<div style="width: 100%; text-align: center;">
<iframe style="width: 602px; height: 602px;" src="yourfile"></iframe>
</div>

or you can add the "text-align: center" to the existing parent element if you want everything in it to be centered.
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26214037
Hi,

u have to use include or add css in that file(mentioned in iframe src).

we cant use like this

iframe img {

}

u have to use like this

img {
...
}

in the src file u have mentioned in the iframe...
0
 
LVL 1

Expert Comment

by:niclassahlin
ID: 26214184
Oh, sorry. I thought you wanted to center the iframe.

If you want to center the image inside the iframe you have to do this inside the included file, like techsathish said. What I understand, the image is the only thing that the iframe will contain so in that file you could just add:

body{
    text-align: center;
}

It will be placed at the top by default.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26214233
Content inside the iframe should be treated as if it's a new page....  So if you want something inside the iframe to be centered, it can only be controlled by the page that is inside it, so that's where you'd need to put your centering stuff.

To do the actual centering, let's assume you have a main.css file that has something for the main page and something for the iframed page...  Give the body in the iframe an id of "iframed" and do something like this (in the page that's iframed)

/*  CSS  */
#iframe{
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#iframeContent{
    width: 600px;
    margin: auto;
}

<html>
<body id="iframe>
<div id="iframeContent">

</div>
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:trinzia
ID: 26272437
As above, but to center the images only, and not to center any text you have there:

#iframe{
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#iframe img {
    margin: 10px auto;
}

The first number, 10px, is the margin for top and bottom.  Choose what number you like.  The second number is for left-right margins, and "auto" sets it to center.
0
 
LVL 5

Expert Comment

by:Greg Gamble
ID: 26274079
Have you centered the image in the page that the iFrame is showing?
0
 

Author Comment

by:pcareyjr
ID: 26284384
Quaoar, trinzia:

I tried implementing your code, but without success.  The page in question is http://www.paulcareydesign.com/3DR.html  Click on the 2nd and 7th thumbnails to see the centering issue.  I've attached the code from the externally loaded css file that the page uses below.  Thanks for taking another look.

Paul
* {
		padding: 0;
		margin: 0;
		background-color: white;
		font: small-caps 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		color: #757374;
		}
	
	#thumbnails img {
		border: 1px solid white;
		margin-left: 2px;
		margin-right: 2px;
		}
	
	#thumbnails img:hover {
		border: 1px dashed #2d292a;
		}
	
	#thumbnails img.empty:hover {
		border: thin solid white;
		cursor: default;
		}
		
	#first {
		margin-left: 0;
		}
	
	#last {
		margin-right: 0;
		}
		
	iframe {
		width: 602px;
		height: 602px;
		border: thin solid white;
		}
		
	div#production {
			position: absolute; top: 95px; left: 635px;
			font-size: 10px;
			width: 150px;
			}
	
	div#production h1 {
			margin-bottom: 10px;
			}
		
	div#credits {
			margin-top: 10px;
			}
	
	div#credits p {
			margin-bottom: 7px;
			}
			
	div h1 {
			font: small-caps 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			color: #2d292a;
			background-color: white;
			}
			
	div#thumbnails {
			margin-left: -2px;
			margin-bottom: 10px;
			}
			
	div#thumbnails img {
			width: 70px;
			height: 70px;
			}
	
	span#showcreds {
			margin-top: 10px;
			}
		
	span.artist {
			font: small-caps 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			color: #2d292a;
			background-color: white;
			}
	
	span.display {
			cursor: pointer;
			}
	
	a:link, a:visited, a:hover, a:active {
			border: 0;
			}
	
	p#photocredit {
			margin-top: 20px;
			color: #757374;
			}
			
	a, .display {
			color: #750710;
			text-decoration: underline;
			}
			
	#thumbnails img.arrow:hover {
		border: thin solid white !important ;
		}
		
	.arrow {
        cursor: pointer;
        }
	      
    div#iframe img {
    	margin-top: 0px;
    	margin-bottom: auto;
    	margin-left: auto;
    	margin-right: auto;
    	}

Open in new window

0
 

Expert Comment

by:DavLink
ID: 26307153
A source code analysis of your example shows that the embedded page only contains the <img>.

Consider the iframe like a separate page : it must have its own CSS. Here's a snippet explaining the markup you should have inside your iframe.

About styling :

The vertical-align property would help, but it only works on table cells.
Set the line-height CSS property of the div to the height of the div, in pixels. This trick works fine if the div contains elements that fit on a single line.


<head>
  <!-- don't forget to link your CSS to the iframe too -->
  <link rel="stylesheet" type="text/css" href="yourstylesheet.css"/>
</head>
<body>
  <div id="iframe">
    <img src="yourpicture" />
  </div>
</body>

Open in new window

0
 

Author Comment

by:pcareyjr
ID: 26309355
It is true that the embedded iframe only contains one <img>.  The image changes based on the thumbnail that is selected.  The iframe is sort of an empty vessel for the images to alternate through, rather than a complete and separate page with html code.  It would be SO labor intensive to code a separate page for each image.  In light of this, is there anything I can do to the code in the page in which the iframe is embedded--or the externally loaded css file--that will effect the image loaded into the iframe?  Thanks,

Paul
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26309368
Since the iframe is just a container for the image, why not use a div tag?
0
 

Author Comment

by:pcareyjr
ID: 26309386
And lose the iframe altogether?
0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26309394
Yep.  I'm working on some sample code as we speak that should hopefully do the job.  I'll be back in a few with the general idea.
0
 
LVL 6

Accepted Solution

by:
Tony O'Byrne earned 500 total points
ID: 26309437
Try this out and see how it works for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title> Images </title>
		<style type="text/css" media="all">
			.centerImage{
				padding: 0px;
				margin: auto;
			}
		</style>
	</head>

	<body>

		<div id="thumbnails">
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR2.jpg" onclick="javascript:imgUpdate(this)"><img id="first" src="images/3DR/webReady/3DR2_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR5.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR5_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR9.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR9_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR1.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR1_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR10.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR10_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR3.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR3_tnail.jpg"></a>
			<a href="javascript:void(0)" id="images/3DR/webReady/3DR7.jpg" onclick="javascript:imgUpdate(this)"><img src="images/3DR/webReady/3DR7_tnail.jpg"></a>
		</div>
		<div id="imgFrame">

		</div>

		<script>
			function imgUpdate( element ){
				var imageURL = element.id ;

				
				document.getElementById(imageURL).innerHTML( "<div class='centerImage'><img src='" + imageURL + "' /></div>" );
			}
			
		</script>
	</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:Tony O'Byrne
ID: 26309462
Forgot to add a class in there to style the containing div...
#imgFrame{
    width: 600px;
    height: 600px;
    border: 1px solid red; /* just so you can see where the div is - remove this later once you have the sizing right */
}

Open in new window

0
 

Author Comment

by:pcareyjr
ID: 26309495
Great.  It may take me a little while to implement this.  Bear with me :)
0
 

Author Comment

by:pcareyjr
ID: 26376765
Well, first thing is the script doesn't work.  Take a look:  http://www.paulcareydesign.com/3DRtest.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39456135
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

577 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