Comment placer un élément html, disons, au milieu d'une fenêtre de navigateur (pas de page, ni d'écran)? Ne dépend pas de la taille de la fenêtre du navigateur, de la résolution de l'écran, de la disposition de la barre d'outils, etc. Par exemple, je veux que ce soit au milieu de la fenêtre du navigateur .
Merci
Pour ce faire, vous devez connaître la taille de l'élément que vous centrez. Toute mesure fera l'affaire (c'est-à-dire px, em, percent), mais elle doit avoir une taille fixe.
Le css ressemblera à ceci:
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Edit : Cela se centre dans la fenêtre. Vous pouvez uniquement vous centrer dans la fenêtre du navigateur à l'aide de JavaScript. Mais cela pourrait suffire quand même, puisque vous voulez probablement afficher une boîte de dialogue contextuelle / modale?
C'est tout à fait possible avec juste CSS - pas de JavaScript nécessaire: voici un exemple
Voici le code source derrière cet exemple:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
Voici:
Et l'exemple:
<!DOCTYPE html>
<html>
<head>
<title>HTML centering</title>
<style type="text/css">
<!--
html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
#td_wrap { vertical-align: middle; text-align: center; }
-->
</style>
</head>
<body>
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
</html>
Jetez un oeil à l'URL d'origine pour plein d'infos: http://krustev.net/html_center_content.html
Vous pouvez faire ce que vous voulez avec ce code. La seule condition est que tout travail dérivé doit avoir une référence à l'auteur original.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
