Special Website Projects Require Special CSS Programming
One would think it would be easy to center a single object like a picture or graphic image in the center of a web page using Cascading Style Sheets, CSS div tag and no tables. There are many ways of centering text or objects in a horizontal mode but not in both the vertical and horizontal modes at the same time, that works completely across most all brands of Web browsers.
I spent a couple of hours using the search engines for research on a special project that I thought would be easy. Finally after looking at maybe 50 websites and doing special searches I finally hit pay dirt.
For those of you that want to dig right in, here is the code I found from an old archive at www.WedDeveloper.com CSS – Vertical and Horizontal Centering.
I did a few modifications to the original html code in the header section
<style title="Default" media="screen" type="text/css">
#center {
width: 200px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px auto auto -100px;
border: 4px double black;
background-color: white;
text-align: center;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-image: url('your image');
}
#center p {
margin-top: 2px;
margin-bottom: 2px;
}
</style>
The div code in the body would look like this:
<div id="center">Professional Web Services</div>
Here is a link to Jim Warholic, Centered Online Internet Marketing web page. Change the window size and notice the picture and text inside the predefined area, always remains centered in the middle of the browser window both horizontally and vertically.
Some of the CSS keys are: first define the box size in width and height measurements, then you position it absolute 50% from the top and 50% from the left, then you set your margins for the top, right, bottom, and left to be: top = -1/2 height, right = auto, bottom = auto, and left = -1/2 width.
Other CSS styles can be added for flavor.
Have fun.
Need help on the Web?
We will go out of our way to promote your company in creative marketing strategies and online advertising ways that will bring in new sales leads, generate website visitors, and turn those visitors into paying customers. Click here for the Top Secrets.
Our core Internet marketing services include:
- Internet marketing services
- SEO, ethical search engine optimization
- Online advertising strategies
- Search engine marketing
- Web branding solutions
- Blogging publishing services
Contact us today for services, strategies, and solutions for your B2B or B2C company.