Centering

Everything related to the visual and coding aspects of websites.
Emrys
Posts: 188
Joined: Fri Oct 18, 2013 1:43 pm
Location: Canada
Contact:

Centering

Post by Emrys »

I have a really quick question for everybody. Does anyone know how to completely centre a layout but have the content be off to the side? Wait, that was phrased weird.

Think of a box. Now think of that box exactly dead centre of your screen - both vertically and horizontally. How do you do that? And now, to add onto that, imagine that box has some instructions that are off to the right side of said box. How do you do that??
Image Like that! I have been trying for years to figure it out on my own and tutorials I look up are less than helpful. Maybe I'm not wording it right but idk xD
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Centering

Post by nyxmidnight »

Developers have been trying to figure that out for years, so you're not alone. You might be able to do it with tables, but, yeah.

OH WAIT!
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Crystal
Posts: 2320
Joined: Thu Jul 19, 2012 5:02 pm
Location: Alberta Canada
Contact:

Re: Centering

Post by Crystal »

Something kinda like this maybe? This one might also help too.

What I do is make a div with the header image as a background and then having another div inside it for the content or navigation (if that makes any sense at all, I'm bad at explaining things). You're welcome to use my coding as reference if it'll help at all.
There are shadows before us - but only because the light is at our back.
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Centering

Post by Mikari »

There's lots of options, pick the one that suits you best. :) I'll add another link to the list: here. After you center the box you can use padding to get the effect on the image.
Destinie
Posts: 3357
Joined: Mon Aug 15, 2011 5:27 pm
Location: Columbia, MD
Contact:

Re: Centering

Post by Destinie »

I always do CSS and set it to:

display: block;
margin: 0 auto;
text-align: center;

I'll usually keep a center class so I can call it on different elements :B
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Centering

Post by nyxmidnight »

Is Flexbox implementation widespread yet? Genuinely curious.
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Centering

Post by dubiousdisc »

Yes! I was playing with it the other day and it's so awesome :D
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Centering

Post by Mikari »

You can also use display:inline-block; in combination with the above codes, such as vertical-align:middle; It's good to see there are so many ways to do this. XD I find this one to be the fastest, though my newfound love for inline blocks might have something to do with it, I've found them to be so useful for all sorts of things.
User avatar
FandomSavant
Posts: 205
Joined: Fri Mar 11, 2016 3:52 pm
Location: California, USA
Contact:

Re: Centering

Post by FandomSavant »

The layout of http://fandomsavant.com is actually made up of divs within a centered container div.

Hi! I'm Patricia.

FandomSavant.com - home of my stuff
Twitter: @FandomSavant
Lysianthus
Posts: 23
Joined: Sun May 17, 2015 9:34 pm
Location: Philippines
Contact:

Re: Centering

Post by Lysianthus »

I can suggest two solutions to horizontally and vertically center an element.

One is Flexbox, like some people already mentioned above. It's a relatively new feature, so old browsers may not support it. (Additionally, make sure to prepend the necessary vendor prefixes.)

HTML

Code: Select all

<div class="container">
    <div class="box"></div>
</div>
CSS

Code: Select all

html, body {
    min-height: 100%;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
Then set the width and height of your .box.

The second one would be using the line-height and vertical-align hack.

Assuming we have the same HTML code...

CSS

Code: Select all

html, body {
    min-height: 100%;
}

.container {
    line-height: 100vh; /* 100% viewport height */
    text-align: center; /* to center an inline-block */
}

.box {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
The .box must have a set width and height for this to work.

As for the text inside the box, I'm seconding the padding solution suggested by Mikari.

I hope this helps! :ok:
Affelius (creative) ☆ Asclaria (network) ☆ Lysianthus (personal)
Post Reply