CSS & HTML Centering Stuff

By | November 19, 2014

In this post called “ & Centering Stuff” I will explain how you can easily center text, images and other items in and CSS.

So let’s begin with the text:

/*    This will center the text    */
p {
    text-align: center;
}
/*    This is also an option inside any class    */
.some-class {
    text-align: center;
}

Now let’s center an image or a complete block:

CSS:

/*    for images put img.center    */
.center {
    width: 500px; /* your width in here */
    margin-left: auto;
    margin-right: auto;
    /* adding text-align to center the text */
    text-align: center;
}

HTML:

<div class="center">This text is centered inside the centered div.</div>
<img class="center" /> <!-- This image is centered -->

So as you can see, this is really simple and also easy to remember.
I hope this helped you, if so then please leave a comment 😉

6 thoughts on “CSS & HTML Centering Stuff

  1. Hom Me

    Hey, thanks for the fantastic post. I feel better after having read this.

    Reply
  2. ÿþS

    Hello! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog article or vice-versa? My blog covers a lot of the same subjects as yours and I think we could greatly benefit from each other. If you happen to be interested feel free to shoot me an email. I look forward to hearing from you! Wonderful blog by the way!

    Reply
  3. Dale

    I’m still learning from you, but I’m making my way to the toop as
    well. I certainly love reading everything that is posted on your blog.Keep the information coming.
    I liked it!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *