Jag har försökt centrera innehållet på min sida med CSS. Problemet är att det inte fungerar korrekt i alla webbläsare. Finns två sätt att göra det på: http://bluerobot.com/web/css/center1.html och http://bluerobot.com/web/css/center2.html. Med dessa alternativ får du den att centrera både horisontellt och vertikalt Här är ett som fungerar på de flesta läsarna: Henkoz: Nice. Det verkar vara den metod som ger minst risk för fatala biverkningar.Centrera med CSS
Jag har tetat i Internet Explorer 6.0, Netscape 6.0, Netscape 6.1, Netscape 7.1, Opera 7.0, Phoenix 0.5 och Mozilla 1.5, och där fungerar det.
Däremot har jag hört från två håll att inte hela sidan syns. Den ena beskriver det som att bara högra halvan syns. Jag drar slutsatsen att dessa webbläsare tolkar värdena för margin korrekt, men inte klarar av värdet 50% på left.
Tyvärr vet jag inte (ännu) vilka webbläsare det rör sig om.
Det här använde jag i mitt stylesheet:
#Top
{
position: relative;
left: 50%;
margin: 15px 0 0 -371px;
width: 740px;
height: 80px;
border: 1px solid #fff;
}
Den lägger vänsterkanten för elementet mitt på sidan, sedan gör den negativa vänstermarginalen att elementet hamnar mitt på sidan.
Är det någon som ser något fel i denna? Finns det något som ska ändras för att den ska fungera säkrare?
Jag har testat att lägga en div-tagg med width:100% och text-align:center, och lagt en div-tagg inuti denna. Det fungerar enbart i Internet Explorer, inte någon annan av webbläsarna jag testar med.
Nu har jag lagt in en gammal beprövad <center>-tagg på sidan, men det innebär att jag inte kan använda XHTML 1.0 Strict, utan måste använda XHTML 1.0 Transitional.
Finns det något sätt att göra detta enligt standarden, men som samtidigt gör att sidan syns i alla webbläsare? Det gör inte så mycket ifall centreringen inte fungerar i precis alla webbläsare, bara inte halva sidan hamnar utanför.Sv: Centrera med CSS
Sv: Centrera med CSS
http://www.wpdfd.com/editorial/thebox/deadcentre1.html
http://www.wpdfd.com/editorial/thebox/deadcentre2.html
http://www.wpdfd.com/editorial/thebox/deadcentre3.htmlSv: Centrera med CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example 7: Vertical alignment of content with JavaScript & CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
text-align: center; /* Takes care of horizontal alignment in Internet Explorer */
background-image: url(grid.gif);
}
#content {
position: relative; /* Needed for Safari */
margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
text-align: left;
width: 200px;
height: 200px;
background-color: #fc0;
}
h1, p {
margin: 0;
padding: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('content');
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
//-->
</script>
</head>
<body>
<div id="content">
<h1>Content</h1>
<p>This content should be centered in your browser window. CSS is used for horizontal alignment, while scripting is used for vertical alignment.</p>
</div>
</body>
</html>Sv: Centrera med CSS
JohanS: Den första metoden är ju den som Henkoz visade. Den andra metoden är ju den jag använde förut, den som är upphovet till frågan.
Ulf: Det är ju den metoden jag använde förut, den som är upphovet till frågan.
Axident: Det är ju samma metod som Henkoz visade.