Positioning within a Circle

HTML & CSS
1

http://markjamesgolfcoaching.com/coaching.html

Hi Guys,

May be a simple one but I want to align the prices in the centre of the grey circles. The grey circle is within a span class, and I have read on some tutorials that it is tricky to align something central within a span compared to a div? But I just can’t get my head around the positioning of these items, I have to set one to relative and absolute, or is this not the best way to do it?

If someone could explain how I can do this so I can learn it and make sure I can do it myself.

Thanks in advance, as always.

2

Hi, ontargett. Try this:

Add this as an aid to middling the content.


.process-icon:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

Set these h4’s to inline-block.


.process-icon > h4 {
    [color=blue]outline: 1px solid magenta;  /* TEST Outline.  TO BE DELETED */[/color]
    display: inline-block;
    vertical-align: middle;
}

The price should be middled now.

If you want to simplify your CSS a bit…
I didn’t see a reason for the combined classes, so I reduced this series of selectors…


.process-icon[color=red].i25, .process-icon.i35, .process-icon.i125, .process-icon.i180[/color] {
    background: url("img/iconprice.png") no-repeat scroll left top transparent;
    display: inline-block;
    height: 100px;
    width: 100px;
    margin-bottom: 15px;
}

to this… (the styles do not change)


.process-icon {
    [color=blue]outline: 1px solid blue;  /* TEST Outline.  TO BE DELETED */[/color]
    background: url("img/iconprice.png") no-repeat scroll left top transparent;
    display: inline-block;
    height: 100px;
    width: 100px;
    margin-bottom: 15px;
}
3

That’s exactly what I was looking for thanks.

If you wouldn’t mind could you answer a couple of questions, as its the only way I can learn the code you’ve just displayed:

What does the :after part do?

Also what is the significance of the > in between process-icon and h4?

Thanks in advance

4

.process-icon is the container for the background image and price. It has fixed dimensions. The fixed height is important to note because a fixed height container is required for this technique to work.

Inline items align to their baseline by default (like words in a sentence). In this technique, we set the display property of the <h4> box to inline-block and add {vertical-align:middle}. However, that alone doesn’t change the vertical position of <h4>. It needs a peer, a reference, with which to align that will cause it to align in the middle of the .process-icon box.

We give it a reference by using :before or :after to add a zero width box inside .process-icon and give that box a display property of inline-block and a height of 100% which causes it to extend to the full height of its parent container (.process-icon). Finally, we give it {vertical-align:middle} which causes the <h4> to align in the middle of the .process-icon box.

You can see that reference box by adding a 1px outline to the .process-icon:after code. (I use outlines a lot while coding. :slight_smile: )

The greater-than symbol, “>” , is the immediate child (first generation child) selector. It selects all <h4> tags that are the immediate children of the .process-icon.


<div class="process-icon">
    <h4>price</h4>   <!-- With the ">" selector, only this first generation <h4> is targeted. -->
    <div>
        <h4>another h4</h4>   <!-- Without it, all generations of <h4> are targeted. -->
    </div>
</div>

I tend to add specifiers like that to minimize undesired interaction that I may be unaware of. In your code, it is probably not needed.

Hope this helps. :slight_smile: