CSS Alignment

Dead Center

.dead-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height/2;
margin-left: -width/2;
height: 70px;
width: 250px;
}

Demo

what is the difference between inline element & block element with text-align:center?

A block element defaults to being the width of its container. It can have its width set using CSS, but either way it is a fixed width.

An inline element takes its width from the size of its content text. (width: auto)

text-align is applicable to text inside block/inline elements only

To align block element (with specified width), use margin: 0 auto;

A simpler way to right-align a block-level element:

.block {
 background-color: blue;
 margin-left: auto;
 margin-right: 0;
 height: 100px;
 width: 250px;
 }

Absolute Alignment

.block {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
/* or
left: 0;
right: 0;
// doesn't work in IE6,7
*/
 }

Vertical Align

Ref: What’s vertical align? – CSS Tricks

How do I vertically align text next to an image with CSS?

<div>
   <img style="width:30px;height:60px;vertical-align:middle">
   <span style="">Works.</span>
</div>

Understanding vertical-align, or “How (Not) To Vertically Center Content”‘

So how do I vertically-center something?!

#myoutercontainer2 { line-height:4em } /* Single line of text */

<style type="text/css">
	#myoutercontainer { position:relative }
	#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
	<div id="myinnercontainer">
		<p>Hey look! I'm vertically centered!</p>
		<p>How sweet is this?!</p>
	</div>
</div>

How to properly vertically align an image

.frame {
    margin: 1em 0;
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}
img {
    max-height: 25px;
    max-width: 160px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #3A6F9A;
}

Altogether: 5 methods to vertically center any element

Ref: Horizontally Centered Menus with no CSS hacks

Semantic & Un-semantic Class Name Examples

Inspired by Chris Coyier article, What Makes For a Semantic Class Name?, @ css-tricks.com.

Unsemantic. Unless used in Grid-based system.

Semantic. Yet consider using <footer> tag (&amp; other semmantic HTML5 elements)

Un-semantic. This is specifying. Why should the text be larger? To “stand-out” or to “highlight” – consider using <mark> tag?

Semantic. It’s like the idea of using <h1 />, <h2 />,…, <h6 />

Unsemantic yet Acceptable in this case. Only name such similar un-semantic classes if only they’re pre-defined such as ir (image-replacement), left (float left) & some theme colors, etc.

Semantic. Some other class named of similar use are: “tweets”, “pagination”, “admin-nav”, “sidebar”.

Unsemantic. Classitis. It can be selected by CSS: .intro p:first-child

Unsemantic. Perhaps in the future, you may wanna this element on the right instead.

Semantic. It usually works in conjunction with other class to best describe the element content (or status of content): class=”success message”, “success feedback”, “fail message”, etc. Don’t use 1 class in such cases like “redBigError” or “renderError”. They are not reusable.

Unsemantic. Classitis. It should be more specific in this case like: book-link, button, etc.