Center image id
Ik heb een vraag betreft het volgende;
Ik wil graag via css een div die gekoppeld zit aan een image centreren in een andere div.
Hoe krijg ik dit voor elkaar. Zelf heb ik al met:
Code (php)
1
.div { margin: 0 auto; }
Mijn html is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<header class="grid_12 header-top">
<a href="#" id="logo"><img src="images/logo.png" alt="DesignStyle Logo" /></a>
<nav id="primary-navwrapper">
<ul id="listnav">
<li><a href="index.html" id="current">Home</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
<li><a href="pages/blog.html">Blog</a></li>
<li><a href="pages/service.html">Service</a></li>
<li><a href="pages/designstyle.html">DesignStyle</a></li>
<li><a href="pages/contact.php">Contact</a></li>
</ul>
</nav>
</header>
<a href="#" id="logo"><img src="images/logo.png" alt="DesignStyle Logo" /></a>
<nav id="primary-navwrapper">
<ul id="listnav">
<li><a href="index.html" id="current">Home</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
<li><a href="pages/blog.html">Blog</a></li>
<li><a href="pages/service.html">Service</a></li>
<li><a href="pages/designstyle.html">DesignStyle</a></li>
<li><a href="pages/contact.php">Contact</a></li>
</ul>
</nav>
</header>
css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#logo {
width: 300px;
margin-left: auto;
margin-right: auto;
}
/* ********************************************************************************* */
/* 4. Navigation & Menus */
/* ********************************************************************************* */
#primary-navwrapper {
height: 35px;
margin: 5px auto 35px auto;
float: right; /* convertible */
}
ul#listnav {
margin: 0;
padding: 0;
list-style: none;
}
#listnav li {
height: auto;
width: auto; /* depending on the padding */
float: left;
}
#listnav li a {
padding: 0 41px; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li:first-child a {
padding: 0 15px 0 0; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li:last-child a {
padding: 0 0 0 11px; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li a#current {
text-decoration: none;
color: #C0479A;
}
#listnav li a:link {
text-decoration: none;
color: #999;
}
#listnav li a:visited {
text-decoration: none;
color: #999;
}
#listnav li a:hover {
text-decoration: none;
color: #444!important;
}
#listnav li a:active {
text-decoration: none;
color: #C0479A;
}
width: 300px;
margin-left: auto;
margin-right: auto;
}
/* ********************************************************************************* */
/* 4. Navigation & Menus */
/* ********************************************************************************* */
#primary-navwrapper {
height: 35px;
margin: 5px auto 35px auto;
float: right; /* convertible */
}
ul#listnav {
margin: 0;
padding: 0;
list-style: none;
}
#listnav li {
height: auto;
width: auto; /* depending on the padding */
float: left;
}
#listnav li a {
padding: 0 41px; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li:first-child a {
padding: 0 15px 0 0; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li:last-child a {
padding: 0 0 0 11px; /* important - padding left and right */
display: block;
text-align: center;
color: #999;/* important - color normal */
font-weight: bold;
line-height: 35px;
}
#listnav li a#current {
text-decoration: none;
color: #C0479A;
}
#listnav li a:link {
text-decoration: none;
color: #999;
}
#listnav li a:visited {
text-decoration: none;
color: #999;
}
#listnav li a:hover {
text-decoration: none;
color: #444!important;
}
#listnav li a:active {
text-decoration: none;
color: #C0479A;
}
Thnkx alvast!
Probeer eens dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
header
{
vertical-align: middle;
text-align: center;
}
header nav
{
text-align: left;
}
{
vertical-align: middle;
text-align: center;
}
header nav
{
text-align: left;
}
Toevoeging op 30/09/2012 17:49:35:
De code van jou werkt helaas ook niet...