Div Vertical Align

Question

Probably one of the most asked questions out there and I've tried several things, with no luck...

Here is a test link for review: http://lifetabernacleaustin.matthewgideon.com/en/welcome/

Basically the header consists of the navigation on the left, which is a fixed width and a column on the right containing text. The right column fills in the rest of the space and the text is centered in that div. The div has a fixed height, but I can not center the text vertically. Line Hight will not work, since the amount of text will be random. Table Cell also does not seem to work, since the width of the right column would be whatever is the remaining space on the right.

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

See Vertically align text in a div

Add

display: table-cell;

to the div#scripture CSS.

Probably best to add it in style.css, since the other stylesheets only apply at certain screen widths.

enter image description here

edited May 23 '17 at 11:50

Community

1
1

answered May 30 '14 at 17:29

MattyB

840
9
15

tried that, but then it eliminates the text being centered between the left column and the far right of the browser window. – mwgideon May 30 '14 at 17:32
I only see a difference in the vertical when I make that change. It's not perfectly centered, but it wasn't before either. – MattyB May 30 '14 at 17:49
Tried what you suggested - vertical looks fine, but as I mentioned - the horizontal centering of the right column no longer works – mwgideon May 30 '14 at 22:59

Debreczeni András · Accepted Answer · 2014-05-31T17:16:41.943

0

Works with table-cell with the following CSS definitions:

#scripture {
    /* your code */
    margin: 0 auto;
    display: table;
}

#scripture p {
    /* your code */
    display: table-cell;
    vertical-align: middle;
}

edited May 31 '14 at 17:16

answered May 30 '14 at 17:55

Debreczeni András

1,589
9
17

Tried what you suggested - vertical looks fine, but as I mentioned - the horizontal centering of the right column no longer works – mwgideon May 30 '14 at 22:58
You can add `margin: 0 auto` to the #scripture div. That will center the div in the remaining space on the right. – Debreczeni András May 31 '14 at 07:06
if you found the answer useful and the solution working, then please accept the answer so other people can find it, too. – Debreczeni András May 31 '14 at 11:56

Div Vertical Align

2 Answers2