• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

The most simplest question in this forum =)

D

Delorean

Junior Member
Hello folks. Yes I did google and I did learn something before having to make this thread.

I already found how how to align it in the middle, so that regardless of resolution, the square image is always in the middle by using the <div align=center> command which only aligns horizontally.
What I need now is to make it aligned vertically as well, so that regardless of user resolution, it's always in the middle of the black box, not glued to the top like it is now.

106k9j9.jpg


Sorry, had to blur our, it has phone number
Thank you very much in advance.
P.S. I am using notepad to edit the HTML.
 
The align property has been deprecated for 14 years. Don't use it.

If you want to center something horizontally, the "compliant" way to do it is to give the element a fixed width (in this case, the width of the image), and then set margin-left: auto and margin-right:auto in the CSS. There is no need to wrap it in a div (though it does no harm), as these properties can be applied directly to the IMG element. Vertical centering is a bit more awkward.

Both types of centering are covered in this W3C page.
 
*sigh* So many questions.

What is the black box? Just <body> with a black background? Will there be text over this or below it vertically? Will there ever be enough to scroll? If so, should the image stay centered or move up as you scroll down?

For now, I'm going to suggest:
Code: 
<div style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; display: table">
  <div style="display: table-cell; vertical-align: middle; text-align:center">
    [your image here]
  </div>
</div>

Based on this and this, and on my own testing.
 
Ken g6 and Aluvus, thank you both for quick reply! I appreciate it.
Sorry for lack of info. The box is just an image file with no splices on it.

Here's the code of inxdex.html file:

Code: 
<html>
<head>
<title>Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (tree.psd) -->
<div align=center>
<img src="images/index.jpg" width="800" height="800" alt="">
</div>
<!-- End Save for Web Slices -->
</body>
</html>


That is all. As you can see, it's beyond basic. There's no flash or anything. Just a simple html 1-page website.


*****EDIT*****

Thank you Ken g6, it worked flawlessly. Just what I wanted.

Aluvus: Thanks for suggestion about 14 year old code. I am gonna have to stick to it because it works. It's just a 1 page website (don't ask lol) and I want it to keep as simple as possible.
Have a good weekend, all!
 
Last edited:
You must log in or register to reply here.

TRENDING THREADS

Back
Top