0

I currently have a simple one page website which displays a logo, 4 short lines of text and 2 buttons which are side by side. I'm using Bootstrap 4.

I have already tried many solutions posted on stack overflow but haven't found a fix.

I am trying to align all of the content horizontally and vertically whilst still being responsive so it is in the middle of the screen on all devices. Would be good to have no scroll however i'm guessing scroll may be required especially on smaller devices such as iPhone SE so that's ok.

The closest I have got is with the code below. This centers correctly however for example, on iPhone SE the logo and buttons are cut off at the top and bottom of the page rather than resizing like responsive should do.

css:

html, body {
    height: 100%;
    font-family: Arial, sans-serif !important;
    overflow:auto;
}

body {
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

html:

<div class="container">
        <div style="padding:15px;" class="row">
            <div class="col text-center">
                <center>
                    <img src="assets/img/logo.png" class="logo" />
                    <br>
                    <br>
                    <p style="margin-top:1rem;" class="big">text</p>
                    <p>text<br>text<br>text</p><p>text<br>text<br>text</p>
                    <p class="no-margin">PURCHASE TICKET INSTANTLY ONLINE</p>
                    <p class="big">OR</p>
                    <p>RESERVE AND PAY ON ENTRY</p>
                    <br>
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <a href="purchase">
                                <button style="background-color: #db0e0e !important;border:none;    line-height: 130%;" class="btn btn-danger btn-md center-block">PURCHASE
                                    <br>TICKET ONLINE</button>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="purchase"><button style="background-color: #ffffff !important;color: #db0e0e !important;border:none;    line-height: 130%;" class="btn btn-danger btn-md center-block">RESERVE
                                <br>PAY ON ENTRY</button></a>

                        </div>
                    </div>
                </center>
            </div>
        </div>
    </div>
Swench Lity
  • 1
  • 2
    Who taught you about the `
    ` tag.? It was deprecated in HTML 4.01, twenty years ago, and was completely removed from the standard for HTML 5. https://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html
     – Ray Butterworth Apr 05 '19 at 14:10
  • 1
    @RayButterworth - It is *obsolete* in HTML5. It's not completely removed. [Here it is](https://w3c.github.io/html/rendering.html#ref-for-elementdef-center%E2%91%A1) – Alohci Apr 05 '19 at 14:31
  • If you are using bootstrap 4 and want things to sit on the centre of the page here is bootstraps flex instructions - https://getbootstrap.com/docs/4.3/utilities/flex/ - this would be the best place to start looking – Andrew Apr 05 '19 at 14:42
  • @Alohci, in section 11.2 your reference document says this about "center": "_Elements in the following list are entirely obsolete, and **must not be used** by authors_". W3Schools etc. say "_The
    tag is not supported in HTML5. Use CSS instead._". The only sense in which it isn't "completely removed" is in that the standard says not to use it.
     – Ray Butterworth Apr 05 '19 at 14:49
  • If you are just looking to centre the text inside a div then you can use css to do this rather than a tag. `text-align:center` - https://www.w3schools.com/cssref/pr_text_text-align.asp – Andrew Apr 05 '19 at 14:55
  • @RayButterworth - In addition to saying don't use it, the spec says how rendering in browsers should be affected by its presence. It's not even trivial, [see this jsbin](https://jsbin.com/jiyagipere/edit?html,css,output). The spec explains what the difference is. – Alohci Apr 05 '19 at 15:06
  • @Alohci, this question didn't ask how to write a web browser so that it can properly render ancient code; it asked about about how to write HTML/CSS. For web authors, the standard says the center tag "must not be used". – Ray Butterworth Apr 05 '19 at 17:18

1 Answers1

0

Flex. See my jsfiddle.

The key is to center both axes with nested flex <div>'s one with a flex-direction of column and one of row, both with justify-content: center. The key "gotcha" with flex is that at least one of the first flex div has to have height: 100%, since flex elements' default height are determined by their contents, not their parent height.

samhuk
  • 109
  • 1
  • 8