Vertical Align Text in a Div Tag

[bm2i]

I'm trying to create a div tag for my danger notes. I have it working so that if the danger note is 2+ lines of text, it looks like I want it.

Is there a way to vertically center the text (so the text is vertically centered in the div box)?

div.Danger
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-repeat: no-repeat;
background-image: url('../Images/Common/Symbol_Danger.eps');
height: 45px;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
background-position: left center;
mc-auto-number-format: '{b}DANGER: {/b}';
mc-auto-number-position: float-left;
background-color: #ffb871;
color: #000000;
}

[Psider]

Have you tried vertical-align: middle; ?

[bm2i]

Have you tried vertical-align: middle; ?

...and it didn't work [in a way, thank God, I would have been so mad at myself if it had worked].

I'm guessing the problem is this stuff:

mc-auto-number-format: '{b}DANGER: {/b}';
mc-auto-number-position: float-left;

[devjoe]

bm2i, I think you are right about that. This is making the "number" label a floating element left of the main div content, and this probably causes it to always float to the top of the box. If there is not another positioning option that works for you, try using mc-autonumber-class, which assigns a style class to the span tag placed around the element, instead of the {b} tags. Then you can assign additional formatting on that class to do both the bold and the positioning of the element.

[Psider]

Have you tried vertical-align: middle; ?

...and it didn't work [in a way, thank God, I would have been so mad at myself if it had worked].

I often kick myself when a simple thing works after I've spent a day overthinking it.

And sorry it didn't work.

[Psider]

Maybe one of these techniques will help?
https://css-tricks.com/centering-css-complete-guide/

Or another technique I read about was to set display: table, then vertical-align: middle should work.

But I'm unsure of flow-on effects and how any of these will interact with the rest of your stylesheet and flare specifics.

[atomdocs]

For online output, vertical centering can be achieved with Flexbox (mentioned in the link that Psider posted). Flexbox is simple to use, but:

• It is CSS3, which might be an issue for older browser support
• You have to code it manually in your stylesheet (easy to do, there are loads of cheatsheets around)
• It won't display in wysiwig view
• It won't show up in the Flare stylesheet editor

If you are ok with all that, then Flexbox is brilliant for this kind of positioning.

[bm2i]

First off, thanks everyone for your replies and help.

This ended up being the most workable solution:

.Danger p
{
line-height: 80%;
}

.Danger p:first-child
{
mc-auto-number-format: '{b}DANGER{/b}: ';
padding-top: -3px;
padding-bottom: -3px;
padding-left: 40px;
margin-left: -40px;
vertical-align: middle;
mc-auto-number-position: inside-head;
line-height: 100%;
}

div.Danger
{
background-image: url('../Images/Symbol_Danger.eps');
background-repeat: no-repeat;
background-position: left center;
border-radius: 3px;
padding-top: 20px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 55px;
background-color: #ffb871;
color: #000000;
width: 100%;
}