Using CSS to Center Vertically and Horizontally
Centering items using CSS is actually very easy. If you want to center a picture horizontally then just use the following code in your CSS file.
IMG.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
What the above CSS code does is center an image between the left and right margins automatically. Whenever you insert an image just make sure to call the “centered” class, for example:
<img class=”centered” src=”/images/someimage.jpg” alt=”some text” />
If you want to center something vertically then you would need to use a container. For example:
DIV.container {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table;
}
P {
display: table-cell;
vertical-align: middle;
}
Now that you have the CSS part done lets look at the HTML part.
<div class=”container”>
<p>This text is vertically centered</p>
</div>
Now lets combine both of the techniques together to have an image that is horizontally and vertically centered in a browser window.
CSS Code:
DIV.container {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table;
}
P {
display: table-cell;
vertical-align: middle;
}
HTML Code:
<div class=”container”>
<p>The image below is vertically and horizontally centered.<br />
<img class=”centered” src=”images/someimage.jpg” alt=”some text” /></p>
</div>
Thats It!
Prevent search engines from crawling and indexing your website
All search engines have automatic web crawlers that are constantly browsing the internet in order to keep their search results up to date. Unless you specifically configure your website to disallow them, they will eventually find you and list you in their search results.
To disallow these crawlers(robots) from crawling your website, just create a file called “robots.txt” with the following data.
User-agent: *
Disallow: /
Upload the “robots.txt” file to the root of your website and it will prevent the crawlers from crawling your website.
You can also use meta tags to prevent the robots from crawling a specific page. To do so, place the following code within the <HEAD></HEAD> tags of your html.
<meta name=”ROBOTS” content=”NOINDEX, NOFOLLOW”>
The NOINDEX keyword is telling the robots not to index the current page in their search results. The NOFOLLOW keyword is telling the robots not to follow any links on the current page.