This Blog Has Moved!

Right, so yes, five years ago I moved to github pages, and never bothered to redirect any of these pages there. Now I've moved on from there, and... Finally I am using my real domain, trishagee.com . My blog is now at trishagee.com/blog .  See you there!
Post a Comment

CSS for Developers: Horizontal and Vertical Centring

First, an apology.  I will be using the British spelling for "centre", because, well, I'm British.  But it gets really confusing because you have to use the American spelling in the code.  And doesn't "Centring" just look wrong?

Part Five: Horizontal and Vertical Centring
One of the most common things you want to do with blocks of content is to centre it.  In particular, you would think that vertically centring content would be straightforward, but it turns out that in HTML/CSS it just isn't.

5.1 Horizontal Centring
Centring a paragraph of text is clearly easy - all you need is text-align: center.  However, sometimes you want to centre a block, something like a div, without having all the text centred as well.  This is slightly trickier than you might expect, because the only CSS attributes you have are for centring text.


<html>
<head>
    <title>Horizontal Centering</title>
    <style type="text/css">
        #div1, #div13 {
            background-color: #DDDDDD;
        }

        #div2, #div14 {
            background-color: #BBBBBB;
        }

        #div3, #div15 {
            background-color: #999999;
        }

        #container, #container5 {
            border: 1px solid black;
            margin: 5px;
        }

        #container5 {
            text-align: center;
        }

        #to-center {
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            border: 5px solid red;
        }

        #to-center2 {
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            border: 5px solid red;
            display: block;
            position: relative;
            text-align: left;
        }

    </style>
</head>

<body>
<div id="container">
    <div id="to-center">
        <div id="div1">One</div>
        <div id="div2">Two</div>
        <div id="div3">Three</div>
    </div>
</div>
<div id="container5">
    <div id="to-center2">
        <div id="div13">One</div>
        <div id="div14">Two</div>
        <div id="div15">Three</div>
    </div>
</div>
</body>
</html>
Using margin-left: auto and margin-right: auto on the block you want to centre is a neat trick for doing this.  And it works fine in Chrome and Firefox.  However, it's not so great in IE 7:


The trick for getting it centred here (the second block) is to set text-align: centre on the div containing the block to centre (container5), then reset the text-align to left on the centred block (to-center2) so the text isn't centred.  Yes, a total faff.

However, there is some good news.  You can get IE to behave the same way as the more sane browsers by setting it into Strict Mode:


Remember kids: Strict Mode Is Your Friend.  And all you need to do is add the following to the top of your HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5.2 Vertical Centring
<html>
<head>
    <title>Vertical Centering</title>
    <style type="text/css">
        #div1, #div4, #div7 {
            background-color: #DDDDDD;
        }

        #div3, #div6, #div9 {
            background-color: #999999;
        }

        #div5 {
            height: 40px;
            line-height: 40px;
            background-color: yellow;
        }

        #div2 {
            height: 50px;
            background-color: orange;
            vertical-align: middle;
        }

        #div8 {
            height: 40px;
            line-height: 40px;
            background-color: cyan;
            font-weight: bolder;
        }

        #container1, #container2, #container3 {
            border: 1px solid black;
            margin: 5px;
        }

    </style>
</head>

<body>
<div id="container2">
    <div id="div4">One</div>
    <div id="div5">Two</div>
    <div id="div6">Three</div>
</div>
<div id="container1">
    <div id="div1">One</div>
    <div id="div2">Two</div>
    <div id="div3">Three</div>
</div>
<div id="container3">
    <div id="div7">One</div>
    <div id="div8">Massive line of text that needs to wrap to show the centering totally doesn't work when you have more than one line of text.</div>
    <div id="div9">Three</div>
</div>
</body>
</html>
Given some of the problems with horizontal alignment, it shouldn't come as a surprise to find vertical alignment is not simple at all.

Us straightforward developer types would expect to be able to put vertical-align: middle on a div and expect all content inside that div to be, well, vertically aligned in the middle.  However this is not the case - see the orange block above.  A quick Google will tell you why this doesn't work, and I don't intend to duplicate the explanation here.

There is a nice hack which works for single lines of text though: if you set the height of the container and the line-height to the same value, the text will be vertically centred within that container (see the yellow panel, div5, above). This works really well for things like buttons or icons.

However, it doesn't work so well for paragraphs of text or sentences that might wrap, line-height is for a single line of text only.  See the cyan panel above for what happens if your text wraps.

I'd love to give you an answer on how to get this to work for text that wraps, but I haven't found a satisfactory solution yet.  What I usually do is set a fixed height on the container and then set the margin on the text so that it sits in a way that looks vaguely centred.  Not a solution I'm happy with, because a) it can sometimes render slightly differently on different browsers b) it's a very fragile solution if you're going to internationalise your page as some languages will have longer or shorter paragraphs and c) it feels like a massive hack.

If anyone has a nice solution for vertically centring paragraphs of text I'd love to hear it.

Comments

Post a Comment

Comments have been disabled since this blog is no longer active.

Popular posts from this blog

Dissecting the Disruptor: What's so special about a ring buffer?

Image
Recently we open sourced the LMAX Disruptor , the key to what makes our exchange so fast.  Why did we open source it?  Well, we've realised that conventional wisdom around high performance programming is... a bit wrong. We've come up with a better, faster way to share data between threads, and it would be selfish not to share it with the world.  Plus it makes us look dead clever. On the site you can download a technical article explaining what the Disruptor is and why it's so clever and fast.  I even get a writing credit on it, which is gratifying when all I really did is insert commas and re-phrase sentences I didn't understand. However I find the whole thing a bit much to digest all at once, so I'm going to explain it in smaller pieces, as suits my  NADD audience. First up - the ring buffer.  Initially I was under the impression the Disruptor was just the ring buffer.  But I've come to realise that while this data structure is at the hea...
Read more

Dissecting the Disruptor: Writing to the ring buffer

Image
This is the missing piece in the end-to-end view of the Disruptor.  Brace yourselves, it's quite long.  But I decided to keep it in a single blog so you could have the context in one place. The important areas are: not wrapping the ring; informing the consumers; batching for producers; and how multiple producers work. ProducerBarriers The Disruptor code has interfaces and helper classes for the Consumer s, but there's no interface for your producer, the thing that writes to the ring buffer.  That's because nothing else needs to access your producer, only you need to know about it.  However, like the consuming side, a ProducerBarrier is created by the ring buffer and your producer will use this to write to it. Writing to the ring buffer involves a two-phase commit.  First, your producer has to claim the next slot on the buffer.  Then, when the producer has finished writing to the slot, it will call commit on the ProducerBarrier . So let's look at...
Read more

Dissecting the Disruptor: How do I read from the ring buffer?

Image
The next in the series of understanding the Disruptor pattern developed at LMAX . After the last post we all understand ring buffers and how awesome they are.  Unfortunately for you, I have not said anything about how to actually populate them or read from them when you're using the Disruptor. ConsumerBarriers and Consumers I'm going to approach this slightly backwards, because it's probably easier to understand in the long run.  Assuming that some magic has populated it: how do you read something from the ring buffer? (OK, I'm starting to regret using Paint/ Gimp .  Although it's an excellent excuse to purchase a graphics tablet if I do continue down this road.  Also UML gurus are probably cursing my name right now.) Your Consumer is the thread that wants to get something off the buffer.  It has access to a ConsumerBarrier , which is created by the RingBuffer and interacts with it on behalf of the Consumer .  While the ring buffer obviously n...
Read more