HTML/CSS I'm trying to center box in CSS and HTML

Click For Summary
To center a box with a span and a div inside both horizontally and vertically, using CSS and HTML, absolute positioning or table cells are recommended methods, especially for compatibility with Internet Explorer. Absolute positioning allows precise placement of elements, while using a table cell with the `align` and `valign` attributes can effectively center content. The discussion highlights that relying on `vertical-align` or `valign` for divs may not yield consistent results in IE, making these alternative methods more reliable for achieving the desired layout.
Sam_
Messages
15
Reaction score
0
Please help!

Does anyone here know much about CSS and HTML? I'm trying to center box (have it as a span with a div inside - a box in a box) both horizontally and vertically. I can get it to work just fine in Firefox, but IE won't let me do it. I've tried everything I can think of, I've looked for help online and tried what I found. Nothing. Does anyone know how to do it?
 
Technology news on Phys.org
If you're using vertical-align or valign then that's the problem since it doesn't work well for divs in IE.

You should either go with a table cell, or use absolute positioning. For example:
Code: 
<html>
<body leftmargin="0px" topmargin="0px">
	Using absolute positioning
	<div style="width:300px;height:300px;border:solid 1px #000000;">
		<div style="left:100px;top:100px;width:100px;height:100px;border:solid 1px #000000;position:absolute;z-index:2">
		
		</div>
	</div>
	Using table cells
	<table cellspacing="0px">
		<tr>
			<td align="center" valign="middle" width="300px" height="300px" style="border:solid 1px #000000">
				<div style="width:100px;height:100px;border:solid 1px #000000;"></div>
			</td>
		</tr>
	</table>
</body>
</html>
 

Thread 'For those who ask: "What programming language should I learn?"'

Learn If you want to write code for Python Machine learning, AI Statistics/data analysis Scientific research Web application servers Some microcontrollers JavaScript/Node JS/TypeScript Web sites Web application servers C# Games (Unity) Consumer applications (Windows) Business applications C++ Games (Unreal Engine) Operating systems, device drivers Microcontrollers/embedded systems Consumer applications (Linux) Some more tips: Do not learn C++ (or any other dialect of C) as a...
View full post »

Similar threads

HTML/CSS Background-position CSS confusion with percentage values?
  • · Replies 9 ·
Replies
9
Views
2K
HTML/CSS How to achieve a paper effect in CSS for Joplin?
  • · Replies 1 ·
Replies
1
Views
2K
HTML/CSS Why does the img ID not work in this CSS code?
  • · Replies 8 ·
Replies
8
Views
2K
HTML/CSS Container shrinks at certain screen widths (CSS)
  • · Replies 5 ·
Replies
5
Views
2K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
2K
HTML/CSS Python - HTML : Isn't this a dictionary ?
  • · Replies 2 ·
Replies
2
Views
1K
JavaScript What scripts do websites like unitednuclear.com use?
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS Html5 <canvas> element related apps not working
  • · Replies 3 ·
Replies
3
Views
2K
HTML/CSS Where can I find free online resources to learn HTML, Javascript, and CSS?
  • · Replies 11 ·
Replies
11
Views
4K
What programming languages/pathways should I focus on?
  • · Replies 11 ·
Replies
11
Views
3K