0

I have this code and i cannot vertical align content in second div to center.

<div style="min-height: 317px"> <!-- this min div is auto generated-->
    <div class="verticalalign">
        <h1>Heading</h1>
        <p>Some text</p>
    </div>
</div>

How CSS for class .verticalalign i must write to vertical align center for second div ?
Parental div i can't modify, it will be generated from theme shortcode.

I also need to horizontal text align in child div.

Passerby
  • 9,715
  • 2
  • 33
  • 50
Oldřich Švéda
  • 97
  • 3
  • 10

2 Answers2

1

Vertical-align works with table elements only, so:

.fusion-column-wrapper {background: #eee; display: table; width: 100%;}
.verticalalign {display: table-cell; vertical-align: middle; }

http://jsfiddle.net/xcgjkm8v/

See that the valid value of vertical-align is middle, not center.

pavel
  • 26,538
  • 10
  • 45
  • 61
0

You can make center without giving css to main div like following:

.verticalalign{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
<div style="min-height: 317px"> 
    <div class="verticalalign">
    <h1>Heading</h1>
    <p>Some text</p>
    </div>
</div>

Hope it will help.

ketan
  • 19,129
  • 42
  • 60
  • 98