Как переместить jquery mobile button down page

Im создаю страницу, у которой есть только верхний и нижний колонтитулы, а одна кнопка - посередине страницы. Ive пробовал использовать margin-top и, похоже, ничего не меняет. Также вы можете увидеть, что я пытаюсь загрузить изображение для фона, но всякий раз, когда я запускаю код, он не отображается. Я знаю его, вероятно, что-то не хватает, но любая помощь на этом тоже была бы фантастической.Как переместить jquery mobile button down page

Thank you.

HTML

<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="description" content="End-term project submission for CS4056 by Kevin Murphy - 11139323"> 
    <meta name="keywords" content="HTML,CSS, Mobile App Design"> 
    <meta name="author" content="Kevin Murphy"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css"> 
    <link rel="stylesheet" href="styles.css"> 

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="background"> 

     <div data-role="header" data-theme="a"> 
      <h1>Formula 1 Constructor List</h1> 
     </div> 

     <div data-role="main" class="ui-content" id="index_button"> 
      <a href="#" data-role="button" data-ajax="false">List of Teams</a> 
     </div> 

     <div data-role="footer" data-theme="a" data-position="fixed"> 
      <h1>Kevin Murphy - 11139323</h1> 
     </div> 

    </div> 
</body> 

</html>

CSS

html, 
body { 
    height: 100%; 
    width: 100%; 
} 

.ui-header .ui-title { 
    white-space: normal; 
} 

#background { 
    background-image: url(formula1.jpg); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

#index_button { 
    margin-top: 50%; 
}

Im извините, если я не отображается код правильно.

источник

2015-04-11 Kevin Murphy

Вы можете сделать это путем организации кода, как это: http://jsfiddle.net/ydsoneh7/

HTML:

<div data-role="page" id="background"> 
    <div class="header" data-role="header" data-theme="a"> 
     <h1>Formula 1 Constructor List</h1> 
    </div> 

    <div class="ui-content" data-role="main"> 
     <div id="index_button"> 
      <a href="#" data-role="button" data-ajax="false">List of Teams</a> 
     </div> 
    </div> 

    <div class="footer" data-role="footer" data-theme="a" data-position="fixed"> 
     <h1>Kevin Murphy - 11139323</h1> 
    </div> 
</div>

И Yout CSS:

body { 
    width: 100%; 
    height:100%; 
    background: url(https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; /* This makes the background always fill the div white spaces */ 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    color:#fff; 
} 
.ui-header .ui-title { 
    white-space: normal; 
} 
.ui-content { 
    height: 170px; 
    position: relative; 
    border: 1px solid #ff0; 
} 
#index_button { 
    position: absolute; 
    top: 50%; /* This centers #index_button */ 
    left: 50%; /* This centers #index_button */ 
    margin-left: -50px; /* This need to be half of the LEFT value */ 
    margin-top: -25px; /* This need to be half of the TOP value */ 
    width: 100px; 
    height: 50px; 
    background: #fff; 
}

Подробнее о "perfect background here"

источник

2015-04-12 00:52:49

Как переместить jquery mobile button down page

ответ

Смежные вопросы