Vertical Align Text in a Div Tag

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
bm2i
Propeller Head
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am

Vertical Align Text in a Div Tag

Post by 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
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Post by Psider »

Have you tried vertical-align: middle; ?
bm2i
Propeller Head
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am

Re: Vertical Align Text in a Div Tag

Post by bm2i »

Psider wrote: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
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Vertical Align Text in a Div Tag

Post by 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
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Post by Psider »

bm2i wrote:
Psider wrote: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. :P

And sorry it didn't work. :(
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Post by 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
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: Vertical Align Text in a Div Tag

Post by 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.
Tom
Flare 2022, Capture 7
Image
bm2i
Propeller Head
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am

Re: Vertical Align Text in a Div Tag

Post by 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%;
}
Post Reply