---
title: "Hur centrera detta enkla fotoalbum!?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/160433-hur-centrera-detta-enkla-fotoalbum"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Aniita"
published: "2007-05-17T15:09:33.000Z"
updated: "2007-05-17T15:51:39.000Z"
replies: 3
views: 438
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/160433-hur-centrera-detta-enkla-fotoalbum"
---

# Hur centrera detta enkla fotoalbum!?

## #1 — Aniita, 2007-05-17T15:09Z

Jag håller på att lära mig HTML/CSS och behöver hjälp med att centrera nedanstående layout så den förblir centrerad oavsett skärmupplösning.

Edit: Tar gärna emot förslag på andra HTML/CSS fotogalleri som man kan använda, gärna lite bättre än detta.

```

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Text</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 <script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>
<style type="text/css">
<!--
#photo {
padding-left:340px;
}

#footer {
padding-left:340px;
padding-top:10px;
}

a:link {
color:#000000;	
text-decoration:none;
}

a:hover {
color:#FFFFFF;
background-color:#FF0000;
}

.menu {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

.footer_text {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#CCCCCC;
}

.photo_1 {
border-style:solid;
border-width:1px;
border-color:#000000;
padding:10px;
color:#000000;

}

abbr[title]:after{
	content: "";
}

abbr[title]:hover:after{
	content: " (" attr(title) ")";
}
-->
</style></head><body>

<div id="photo"><br>
<span class="menu">Foton:
 <a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
 <a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
 <a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
 <a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
 <a href="javascript:changeImage('http://img248.imageshack.us/img248/1761/stockholmlc9.jpg')">Stockholm</a> -
</span><br>

 <br>
 <img src="http://img248.imageshack.us/img248/1761/stockholmlc9.jpg" name="mainimage" class="photo_1" alt="Photo" height="300" width="400">
</div>
<div id="footer"><span class="footer_text">Copyrighttext</span></div>

</body></html>
```

Permalänk: https://www.webforum.nu/p/160433

## #2 — aasah, 2007-05-17T15:16Z

Använd kod-taggarna när du postar kod! så blir det mycket lättare att se hur det ser ut! Alltså, omgärda kodstycket med: \[ html\]din HTML-kod   eller \[ code\]din annan kod . (Fast utan mellanslag mellan \[ och h/c )Exempel: 

```
<input type="text" name="n" value="apa">
```

Annan kod: 

```
function() {
   return true;
}
```

Permalänk: https://www.webforum.nu/p/1978589

## #3 — tanten, 2007-05-17T15:43Z

Det finns två enkla saker du kan göra med den du har.
antingen centrerar du alltihop i body

```
body{
text-align: center;
}
```

eller t.ex skapar en \<div\> som bara ska centrera
t.ex

```
#galleri{
width: 500px;/*hittade på en bredd.*/
margin:5% auto;/*5% är från toppen och auto centrerar.*/
}
```

 
I båda fallen raderar du din padding-left som du har annars blir det fel.
\<div id="galleri"\>lägger du överst under \</head\> och \</div\> längst ner på sidan innan \</body\>.

Och välkommen till WF!  :)

Permalänk: https://www.webforum.nu/p/1978604

## #4 — tanten, 2007-05-17T15:51Z

Om du vill testa fotoalbum utan javascript och bara css kan du titta på flera olika på Stu´s sida
<http://www.cssplay.co.uk/menu/complex_slides.html>

Permalänk: https://www.webforum.nu/p/1978609

---

Tråden på webben: https://www.webforum.nu/amne/html-css/160433-hur-centrera-detta-enkla-fotoalbum
