-2

I was wondering if someone can help to center text on about page within body, without changing dynamic page height calculation.

here is page: https://protasov.by/contacts/

here is jade/pug code

 section.container-fluid
            .row(style="padding-top:20px;").centered-form.center-block
                section.container(style="display: flex; align-items: center; justify-content: center;").col-md-10.text-center
                    .wb-stl-normal(style="margin: auto; align-self: center;")
                        p
                            em TEXT
                            |  TEXT TEXT
                            br
                            span.wb-stl-small TEXT TEXT
                        br

I tried different approaches and can't achieve any visible result that will help me to center text in the middle of block "section.container-fluid" so that it be perfectly aligned H/V in page canvas.

Aaron Martin
  • 128
  • 1
  • 13
Vitaly Protasov
  • 161
  • 1
  • 10
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Mar 01 '18 at 22:25

2 Answers2

0

You can use bootstrap flex-box classes

to align horizontally use

.d-flex .align-content-{x} where 'x' could be center, around or between

to align vertically use

.d-flex .align-items-{x} where 'x' could be center, stretch or baseline

Reference to bootstrap flex-box classes here

You can learn more about css flex-box here

shoxton
  • 66
  • 10
  • 1
    In the code example above it shows that the classes `align-items-center` and `justify-content-center`. It might be solved with `m-auto ` but it’s hard to tell with the incomplete code provided. – Levidps Mar 02 '18 at 01:02
  • he wants to center horizontally or vertically? – shoxton Mar 02 '18 at 01:07
  • Not sure, it’s really not clear. I’d guess both by that markup but I can’t be sure... – Levidps Mar 02 '18 at 03:00
  • want vertical and horizontal centering in body layout – Vitaly Protasov Mar 02 '18 at 11:04
  • I tried to do: section.container-fluid d-flex.flex-row.justify-content-center.align-items-center .flex-column(style="padding-top:20px;").justify-content-stretch.wb-stl-normal.text-center p TEXT but anyway it's sits on top of container-fluid – Vitaly Protasov Mar 02 '18 at 11:39
-1

I added in wb_main height in precentage, set minimum. then added d flex, and h 100 classes, and now vertical alignment works perfect.

Vitaly Protasov
  • 161
  • 1
  • 10