CHAPTER#5: CENTERING A CONTENT

CHAPTER 5: CENTERING A CONTENT

Hi everyone! I haven't updated for a while so here's a simple tutorial. (In case you have no idea how to do this).
Centering a content is very important. We have no ruler in the eye so we can't measure exactly right?

So here's the magic trick

< div style="margin: 0px auto " >

This simply sets the left and right margins to automatic, while leaving the top and bottom margins 0. Simple huh? HOWEVER, this could be a little more tricky.

One problem is that:
It does not center!

Well, if you have a div which holds all the other divs, make sure you specify the "centering div's" width with a width exactly suitable for it's contents (if you have a 200px image and 200px another div for text, make it's width 400, given no margin in between the contents). Like this:

< div style="margin: 0px auto;width:400px" >

Another problem is that:
The contents are behind another content!

That is why you have to put a < div style="float:left " > inside our centering div! And this is where you will adjust all your margins, background-color and such.

So here's a demonstartion:

IMAGE

TEXTS

Here's the codes used

< div style="margin: 0px auto;width:400px;" >
< div style="float:left;width:400px;" >
< div style="float: left; width: 200px; height: 200px; text-align: center; background-color: rgb(204, 204, 204);" >< br / >
< br / >
< br / >
< br / >
< br / >
< br / >
< span style="color:#696969;" >IMAGE< /span >< /div >

< div style="float: left; width: 200px; height: 200px; text-align: center; background-color: rgb(211, 211, 211);" >< br / >
< br / >
< br / >
< br / >
< br / >
< br / >
< span style="color:#696969;" >TEXTS< /span >< /div >
< /div >
< /div >

The text in bold does the centering while the italicized one just hold the contents to prevent them from being overlapped by other contents.

← Previous Chapter Next Chapter →

Comments

You must be logged in to comment

Janmidget #1 Nov 6, 2017 17:20:30

I made my own code for chapter layout following some instructions in every tutorial I happen to scan here in aff but can you help me how to make a picture as text background? Every time I am following the <div tag with <img tag its just topping my text box. It didn’t turn out as BG and I’mma lil bit frustrated abt it.

Theartdevotee #2 Feb 6, 2017 02:22:22

Is the layouting on tumblr the same with aff?

Leonny #3 Apr 7, 2016 18:47:04

Chapter 7: I'm still confused about the float thingy-- like, does it save you time from writing the "margin border this" or smtg like that¿? It's been many months since I last coded.

slategrey #4 Apr 1, 2016 03:24:53

Chapter 5: Thanks for making this thread! Quick question though, does the positioning of the div apply the same even if you add links on it, or images? I don't use "float" generally as it doesn't work for me both for images and divs so I just use "margin" to position the boxes (I hate this part most in coding like for real since it's very hard to align them using margins, and although float seems easier, I can't make it work like GAH). I've seen you do the same with images and a div together (using margin) so no problem with that I guess, but how do I do it with two divs?