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;
}
Vertical Align Text in a Div Tag
Re: Vertical Align Text in a Div Tag
Have you tried vertical-align: middle; ?
Re: Vertical Align Text in a Div Tag
...and it didn't work [in a way, thank God, I would have been so mad at myself if it had worked].Psider wrote:Have you tried vertical-align: middle; ?
I'm guessing the problem is this stuff:
mc-auto-number-format: '{b}DANGER: {/b}';
mc-auto-number-position: float-left;
Re: Vertical Align Text in a Div Tag
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.
Re: Vertical Align Text in a Div Tag
I often kick myself when a simple thing works after I've spent a day overthinking it.bm2i wrote:...and it didn't work [in a way, thank God, I would have been so mad at myself if it had worked].Psider wrote:Have you tried vertical-align: middle; ?
And sorry it didn't work.
Re: Vertical Align Text in a Div Tag
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.
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.
-
- 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
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
Tom
Flare 2022, Capture 7
Flare 2022, Capture 7
Re: Vertical Align Text in a Div Tag
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%;
}
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%;
}