Centreren van een afbeelding

Door George van Baasbank op 13-02-2014 19:48

3.809 views

Hallo allemaal,

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:


<!-- 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 -->

De bijbehorende CSS-code:


.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; 
}

George

Mathieu Posthumus

14-02-2014 09:06

Over welkke class gaat het? want anders zit ik mezelf ook rot te zoeken:D

George van Baasbank

14-02-2014 12:04

Ik denk foto_menu of persfoto.

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

Ward van der Put

14-02-2014 13:25

Je kunt het sjiek “progressive” oplossen door geen afbeeldingen maar achtergrondafbeeldingen te gebruiken. Vervolgens gebruik je de CSS3-eigenschap background-size: cover om de foto automatisch de div te laten vullen.

Hier vind je een beschrijving van de techniek.

Jasper DS

14-02-2014 13:44

@Ward, hoe ga je de source naar de afbeelding (via PHP) in de css krijgen? Lijkt mij in dit geval geen goede oplossing.

@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/

George van Baasbank

14-02-2014 13:53

Ward en Jasper,

Helaas werkt het voorbeeld van Jasper bij mij niet. Het lijkt wel of er ergens een float: left staat.

Ward van der Put

14-02-2014 14:01

Jasper DS op 14/02/2014 13:44:02

@Ward, hoe ga je de source naar de afbeelding (via PHP) in de css krijgen? Lijkt mij in dit geval geen goede oplossing.

Wat bedoel je? Je vervangt gewoon:

echo '<img src="...">';

door:

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.

Jasper DS

14-02-2014 14:22

@TS, als ik kijk naar de link die je gaf moet je volgende code verwijderen uit de css:


#home_featured21 img {
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.

Reageren

Inloggen om te reageren