I'm trying to center box in CSS and HTML

  • Context: HTML/CSS 
  • Thread starter Thread starter Sam_
  • Start date Start date
  • Tags Tags
    Box Center Css Html
Click For Summary
SUMMARY

This discussion focuses on centering a box in CSS and HTML, specifically addressing compatibility issues with Internet Explorer (IE). The recommended solutions include using absolute positioning or table cells to achieve horizontal and vertical centering. The provided code examples illustrate both methods, demonstrating how to create a centered box within a parent container. The discussion emphasizes that vertical-align and valign attributes do not work effectively for div elements in IE.

PREREQUISITES
  • Understanding of CSS positioning techniques
  • Familiarity with HTML structure and elements
  • Knowledge of browser compatibility issues, particularly with Internet Explorer
  • Basic skills in creating and styling tables in HTML
NEXT STEPS
  • Research CSS Flexbox for modern centering techniques
  • Learn about CSS Grid Layout for advanced layout designs
  • Explore browser compatibility tools and resources
  • Investigate responsive design principles for centering elements
USEFUL FOR

Web developers, front-end designers, and anyone looking to improve their skills in CSS layout techniques and browser compatibility issues.

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>
 

Similar threads

HTML/CSS Background-position CSS confusion with percentage values?
  • · Replies 9 ·
Replies
9
Views
3K
HTML/CSS How to achieve a paper effect in CSS for Joplin?
  • · Replies 1 ·
Replies
1
Views
3K
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
3K
HTML/CSS [CSS] Why do my containers shrink at screen widths <347px?
  • · Replies 5 ·
Replies
5
Views
3K
HTML/CSS Python - HTML : Isn't this a dictionary ?
  • · Replies 2 ·
Replies
2
Views
2K
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