0

I tried expressing my problem earlier in another thread, but the only way that could fix it, caused the website to not be compliant with different size devices. The method I have now tried to use is the vertical center method stated in this topic. vertical-align with Bootstrap 3

What I'm wanting to happen is to have a full page background along with a horizontally / vertically aligned div tag that contains my name and occupation. But instead what's happened is that it aligns the text to the middle of the page, but then it just doesn't align it vertically.

<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
        <h1>name</h1>
        <h2>occupation</h2>
        <h3>location</h3>

</header>
</div>

CSS

header {
/*position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-family: Roboto-thin ;
padding: 0px;
border-style: none;
color:#ffffff ;
 }
header h1  {
font-family:;
font-size: 8rem; /* =28px */
letter-spacing: 0.05em;
padding: 0px ;
margin-top: 0px;
margin-bottom: 13px;
}

header h2 {
font-family: ;
font-size: 5rem;
padding: 0px;
margin: 0px;
}

header h3 {
font-family: ;
font-size: 3rem;

}

.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

The old method I used can be found in the header tag commented out. This method works fine for some browsers, but it seems that most browsers don't support the transform function.

Thanks in advance.

Community
  • 1
  • 1
Mo Martin
  • 207
  • 3
  • 12
  • 1
    Please make a JS Fiddle I will try to help you. – Ahmad Sharif Jan 11 '15 at 22:54
  • i've attempted to, but i'm not too sure if i've done it right. http://jsfiddle.net/rg2ypw1v/ – Mo Martin Jan 11 '15 at 23:15
  • Did you check out this answer. Because here you will get every possible ways to do this. http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally – Ahmad Sharif Jan 11 '15 at 23:28
  • I did have a look at that, but a lot of those are wanting me to define a height / width, which in turn makes my website unusable on some devices. – Mo Martin Jan 11 '15 at 23:41
  • ok then. Please follow this. I have go to bed now. After wake up I will try to fix. – Ahmad Sharif Jan 11 '15 at 23:47
  • Follow what? and yes that's fine, i thank you for your time. Also the only method I didnt follow was the jquery method, i'm not 100% sure on how i incorporate that though. – Mo Martin Jan 12 '15 at 00:07

1 Answers1

0

Bootstrap typically uses percentages for cross-platform/cross-browser capabilities. Maybe you could try adding something like this to your css file (alongside your .vcenter class):

.vcenter::before {
    content:'';
    display:inline-block;
    height: 100%;
    vertical-align:middle;
    width:0px;
 }

This will retrieve the height of the screen based on percentages and format the text vertically before it is displayed, which in theory, should work on all devices and browsers(for the most part). In IE8 you've got to use :before instead of ::before and have a !DOCTYPE declared. Hope this helps!

Trey Shaffer
  • 129
  • 1
  • 1
  • 8
  • I've just tried this and there's still no joy :( It didn't center it at all. If it's easier I can send a link to the actual website I'm trying to create. This might make it a bit easier for anyone trying to troubleshoot the div. – Mo Martin Jan 12 '15 at 18:05