Почему мой топ: 50% CSS не работает?

Я делаю упражнение, и, хотя я уже сосредоточен вертикально ранее, в этом случае я не могу его центрировать.Почему мой топ: 50% CSS не работает?

$(document).ready(function() { 
 

 
// Appears the search form input 
 
$("#search").addClass("search-init"); 
 
\t 
 
}); // $(document).ready

body { 
 
\t position: relative; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
.search-init { 
 
\t height: 5rem; 
 
\t width: 5rem; 
 
\t border: 2px solid green; 
 
\t border-radius: 2.5rem; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="search"> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-01-06 Rafa

Добавить фиксированную высоту кузова. Значит, вы должны указать высоту исправления для элемента-элемента в элемент вертикального центра –

Повторяющийся вопрос: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – Rahul

Это не можно сделать это с полной высотой окна? – Rafa

Добавить высоту в html элемента:

html { height: 100%; }

и он будет работать - тело нуждается в пространстве, чтобы занимать, тем самым, html 100%, тело может затем занимают полную 100-процентную высоту.

источник

2017-01-06 09:10:42 Stuart

Удалить position:relative из body и было бы в центре

Здесь обновляется код

$(document).ready(function() { 
 

 
// Appears the search form input 
 
$("#search").addClass("search-init"); 
 
\t 
 
}); // $(document).ready

body { 
 
\t /*position: relative;*/ 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
.search-init { 
 
\t height: 5rem; 
 
\t width: 5rem; 
 
\t border: 2px solid green; 
 
\t border-radius: 2.5rem; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="search"> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-01-06 09:12:27

Declare положение тела с 'абсолютной'.

$(document).ready(function() { 
 

 
// Appears the search form input 
 
$("#search").addClass("search-init"); 
 
\t 
 
}); // $(document).ready

body { 
 
\t position : absolute; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
.search-init{ 
 
\t height: 5rem; 
 
\t width: 5rem; 
 
\t border: 2px solid green; 
 
\t border-radius: 2.5rem; 
 
    position : absolute; 
 
    top : 50%; 
 
    left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="search"> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-01-06 09:15:35 YSuraj

Сделать это легко. Используйте div вместо html и boy. HTML понравится.

<html lang="en"> 
    <body> 
     <div class="box-table"> 
      <div class="box-table-cell"> 
       <img src="http://placehold.it/250x150/121212/ffffff?text=Vertically+center+imag" /> 
      </div> 
     </div> 
    </body> 
</html>

CSS

.box-table{ 
    display: table; 
    height: 500px; 
    margin-left: auto;/* If you want to center this box */ 
    margin-right: auto;/* If you want to center this box */ 
    text-align: center; 
    width: 500px; 
} 
.box-table{ /* This CSS for full window */ 
    bottom: 0; 
    display: table; 
    height: 100%; 
    left: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
    position: fixed;/* You can use absolute */ 
    right: 0; 
    text-align: center; 
    top: 0; 
    width: 100%; 
} 
.box-table-cell{ 
    display: table-cell; 
    height: 100%; 
    vertical-align: middle; 
    width: 100%; 
} 
img{ 
    vertical-align: middle; 
}

body{ 
 
    background-color: #ff0000; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box-table{ 
 
    background-color: rgba(0, 0, 0, 0.85); 
 
    bottom: 0; 
 
    display: table; 
 
    height: 100%; 
 
    left: 0; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    padding-right: 17px; 
 
    position: fixed;/* You can use absolute */ 
 
    right: 0; 
 
    text-align: center; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.box-table-cell{ 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 
img{ 
 
    vertical-align: middle; 
 
}

<html lang="en"> 
 
    <body> 
 
     <div class="box-table"> 
 
      <div class="box-table-cell"> 
 
       <img src="http://placehold.it/600x350/121212/ffffff?text=Vertically+center+imag" /> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

источник

2017-01-06 09:26:47 Rahul

Попробуйте

$(document).ready(function() { 
 

 
// Appears the search form input 
 
$("#search").addClass("search-init"); 
 
\t 
 
}); // $(document).ready

body,html { 
 
\t position: relative; 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
.search-init { 
 
\t height: 5rem; 
 
\t width: 5rem; 
 
\t border: 2px solid green; 
 
\t border-radius: 2.5rem; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
    <div id="search"> 
 
    </div> 
 
</body> 
 
</html>

источник

2017-01-06 10:49:03

Почему мой топ: 50% CSS не работает?

ответ

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