Centreren van een afbeelding
Ik kom er even niet uit: Ik wil de afbeelding uit onderstaande code in het midden van het vlak hebben staan maar dat lukt mij even niet.
Wie heeft een suggestie?
HTML-code:
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
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
<!-- Vanaf hier de content -->
<?php
$nTeller = 1;
while($rowMenu = mysqli_fetch_array($cResultFotoos)) {
if($nTeller == 1 ) {
$cClass = "box_menu_links";
}
if($nTeller == 2 ) {
$cClass = "box_menu_midden";
}
if($nTeller == 3 ) {
$cClass = "box_menu_rechts";
}
$cUrl = $rowMenu['url'];
$cAfbeelding = $cPersfotomap . $rowMenu['bestandsnaam'];
$cMenukeuze = $rowMenu['keuze'];
?>
<div class="<?php echo $cClass ; ?>">
<figure class="foto_menu">
<img class="persfoto" src="<?php echo $cAfbeelding ; ?>" alt="" />
</figure>
<p class="geelvlak_klein">
<?php
echo nl2br($rowMenu['beschrijving'] . "\r\n" . $rowMenu['onderschrift'] . "\r\n" . "Bron: " . $rowMenu['bron'] . "\r\n" . "Formaat: " . $rowMenu['formaat'] . " pixels" . "\r\n" . "Omvang: " . $rowMenu['omvang'] . " MB") ;
?>
</p>
<p class="midden">'<input type="submit" value="Download" /></p>
<div class="regelhoogte25"></div>
<p class="arial_wit"></p>
</div>
<?php
if($nTeller == 3 ) {
$nTeller = 0;
?>
<div class="clear"></div>
<?php
}
$nTeller++;
}
?>
<div class="regelhoogte25"></div>
<!-- Tot hier de content -->
<?php
$nTeller = 1;
while($rowMenu = mysqli_fetch_array($cResultFotoos)) {
if($nTeller == 1 ) {
$cClass = "box_menu_links";
}
if($nTeller == 2 ) {
$cClass = "box_menu_midden";
}
if($nTeller == 3 ) {
$cClass = "box_menu_rechts";
}
$cUrl = $rowMenu['url'];
$cAfbeelding = $cPersfotomap . $rowMenu['bestandsnaam'];
$cMenukeuze = $rowMenu['keuze'];
?>
<div class="<?php echo $cClass ; ?>">
<figure class="foto_menu">
<img class="persfoto" src="<?php echo $cAfbeelding ; ?>" alt="" />
</figure>
<p class="geelvlak_klein">
<?php
echo nl2br($rowMenu['beschrijving'] . "\r\n" . $rowMenu['onderschrift'] . "\r\n" . "Bron: " . $rowMenu['bron'] . "\r\n" . "Formaat: " . $rowMenu['formaat'] . " pixels" . "\r\n" . "Omvang: " . $rowMenu['omvang'] . " MB") ;
?>
</p>
<p class="midden">'<input type="submit" value="Download" /></p>
<div class="regelhoogte25"></div>
<p class="arial_wit"></p>
</div>
<?php
if($nTeller == 3 ) {
$nTeller = 0;
?>
<div class="clear"></div>
<?php
}
$nTeller++;
}
?>
<div class="regelhoogte25"></div>
<!-- Tot hier de content -->
De bijbehorende CSS-code:
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
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
.box_menu_links {
float: left;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}
.box_menu_rechts {
float: right;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-right: 50px;
margin-top: 50px;
}
.box_menu_midden {
float: left;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-left: 10px;
margin-right: auto;
margin-top: 50px;
}
.foto_menu {
width: 300px;
height: 190px;
border: none;
}
.persfoto {
max-width: 300px;
max-height: 200px;
}
.geelvlak_klein {
width: 300px;
background-color: yellow;
padding: 10px;
text-align: center;
font-family: Arial;
font-size: 10px;
}
.midden {
text-align: center;
margin-left: auto;
margin-right: auto;
}
float: left;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}
.box_menu_rechts {
float: right;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-right: 50px;
margin-top: 50px;
}
.box_menu_midden {
float: left;
width: 300px;
height: 400px;
background-color: rgb(90,25,60);
border: none;
margin-left: 10px;
margin-right: auto;
margin-top: 50px;
}
.foto_menu {
width: 300px;
height: 190px;
border: none;
}
.persfoto {
max-width: 300px;
max-height: 200px;
}
.geelvlak_klein {
width: 300px;
background-color: yellow;
padding: 10px;
text-align: center;
font-family: Arial;
font-size: 10px;
}
.midden {
text-align: center;
margin-left: auto;
margin-right: auto;
}
George
Ik heb zelf al wat met margin-left en margin-right in de stand "auto" geprobeerd maar dat werkt niet
Toevoeging op 14/02/2014 12:29:22:
Kijk eens op: http://podiumspektakel.eu/fotoboek.php?categorie=bestuur#bovenaan
Hier vind je een beschrijving van de techniek.
@TS, image is een inline-block element. Je zal het element dus display block moeten maken. Op die manier werkt margin: 0 auto; wel.
http://jsfiddle.net/CCsCs/
Helaas werkt het voorbeeld van Jasper bij mij niet. Het lijkt wel of er ergens een float: left staat.
Jasper DS op 14/02/2014 13:44:02:
Wat bedoel je? Je vervangt gewoon:@Ward, hoe ga je de source naar de afbeelding (via PHP) in de css krijgen? Lijkt mij in dit geval geen goede oplossing.
Code (php)
1
echo '<img src="...">';
door:
Code (php)
1
echo '<div style="background-image:url('...')"></div>';
Je varieert dus in PHP alleen de url voor de CSS-eigenschap background-image. De andere, statische CSS-code doet vervolgens de rest.
Code (php)
1
2
3
4
2
3
4
#home_featured21 img {
display: inline;
float: left;
}
display: inline;
float: left;
}
Zorg ervoor dat je niet te veel rommelcode hebt binnen je CSS. Waarvoor dient die klasse dat je probleem veroorzaakt? Weet met wat je bezig bent. Combinatie van display inline en float left lijkt me ook al vrij raar.
@Ward, dat vind ik eerder een "hack" dan een oplossing. Semantisch gezien is een <img> hier zeker en vast op z'n plek. Dan lijkt het mij absurd om een background-image toe te voegen aan een image via inline css. Geef mij dan maar gewoon een proper HTML elementje met een display block en een margin auto.