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.

Vertical Align Text in a Div Tag

Postby bm2i on Fri Mar 03, 2017 9:45 am

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;
}
bm2i
Propeller Head
 
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am

Re: Vertical Align Text in a Div Tag

Postby Psider on Sun Mar 05, 2017 4:15 pm

Have you tried vertical-align: middle; ?
Psider
Propellus Maximus
 
Posts: 598
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Postby bm2i on Mon Mar 06, 2017 7:02 am

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;
bm2i
Propeller Head
 
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am

Re: Vertical Align Text in a Div Tag

Postby devjoe on Mon Mar 06, 2017 8:06 am

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

Re: Vertical Align Text in a Div Tag

Postby Psider on Mon Mar 06, 2017 6:27 pm

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: 598
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Postby Psider on Tue Mar 07, 2017 5:54 pm

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.
Psider
Propellus Maximus
 
Posts: 598
Joined: Wed Jul 06, 2011 1:32 am

Re: Vertical Align Text in a Div Tag

Postby atomdocs on Wed Mar 08, 2017 12:59 am

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 2019, Capture 7
Image
User avatar
atomdocs
Sr. Propeller Head
 
Posts: 307
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand

Re: Vertical Align Text in a Div Tag

Postby bm2i on Thu Mar 16, 2017 7:19 am

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%;
}
bm2i
Propeller Head
 
Posts: 12
Joined: Mon Jun 16, 2008 6:35 am


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 0 guests

cron