Jump to content

[HTML] 2 afbeeldingen naast elkaar centreren (MAC)


Recommended Posts

Geplaatst:

Hallo!

Ik ben bezig met een stukje html en wil twee afbeeldingen centreren. Deze twee afbeeldingen moeten naast elkaar komen te staan. De volgende code heb ik daarvoor gebruikt:

<p><img src="http://www.scberlikum.nl/index/media/bearleague/bl1407784219430.gif" border="0" width="30" align="middle" /> <img src="http://www.scberlikum.nl/index/media/bearleague/bl1322751048567.jpg" border="0" width="30" align="middle" /></p>

Echter; ik krijg dan het volgende resultaat:

zwn5at.png

Zoals jullie zien, is dit niet in het midden van het blok. Het liefst zou ik ook nog een streepje er tussen willen hebben. Het moet er als volgt uit komen te zien:

196p3r.jpg

Weet hier iemand een code van?

Het zou ook kunnen dat ik de logo's met Illustrator (en streepje) aan elkaar vast maak. Dan slaat mijn Mac het op het bureaublad op. Wat is dan de directory van de Macintosh HD schijf? De volgende is bijvoorbeeld van een Windows pc, maar de Mac is anders.

<img src = "C:/bannerachtergrondL.png">

Alvast bedankt.

Geplaatst:

Zorg ervoor dat je een div-element als container gebruikt. Deze div kun je vervolgens een breedte opgeven en hem via een margin centreren. Dat is niet nodig als je dit in een menu gebruikt, dan kun je direct een text-align toekennen aan je div, waardoor de afbeeldingen + tekst gecentreerd worden. Een minimaal voorbeeld kun je hier vinden.

Geplaatst: (bewerkt)

Dan slaat mijn Mac het op het bureaublad op. Wat is dan de directory van de Macintosh HD schijf? De volgende is bijvoorbeeld van een Windows pc, maar de Mac is anders.

<img src = "C:/bannerachtergrondL.png">

Simpel,

'/Users/NAAM/Desktop'.

Dit kun je zien door het bestand in de terminal te slepen. De schijf word niet genoemd zoals dat in Windows moet, omdat het volgens mij niet mogelijk is om twee harde schijven te plaatsen in een Mac. Hier ben ik echter niet zeker van.

Het pad naar de Macintosh HD schijf is '/'. Dat is namelijk de root map.

Bewerkt: door Davedavy
Geplaatst: (bewerkt)

JWNirfv.png

zoiets?

Ik heb daarvoor een div gemaakt, en in die div nog een div. In die 2e div heb ik de images gezet en ze met css gecentreerd.

Mijn HTML is niet het beste, maar de code;

<html>
<head>
<style>
.box {
border-style: solid;
width: 300px;
border-radius: 5px;
height: 100px;
text-align: center;
font-family: arial;
}

.box .img {
text-align: center;
}

</style>
</head>

<body>

<div class="box">
20-9-2014 14:30u.
<div class="img">
<img src="http://www.scberlikum.nl/index/media/bearleague/bl1407784219430.gif" width="30" align="center"/> —
<img src="http://www.scberlikum.nl/index/media/bearleague/bl1322751048567.jpg" width="30" align="center" />
</div>
Trynwalden sc Berlikum
</div>
</body>
</html>

edit; lettertype etc, kan jezelf veranderen.

Bewerkt: door Larsiexd
  • 1 maand later...
Geplaatst:

Persoonlijk zou ik een afbeelding niet met een "extra" div centreren? Het is veel meer code en je kunt gemakkelijk de class van de div meegeven aan de image?

Oftewel 1 class toepassen op beide images? Scheelt code en snelheid? :D

Geplaatst:

Persoonlijk zou ik een afbeelding niet met een "extra" div centreren? Het is veel meer code en je kunt gemakkelijk de class van de div meegeven aan de image? Oftewel 1 class toepassen op beide images? Scheelt code en snelheid? :D

Een div meer of minder maakt echt niks uit voor de snelheid. Soms is eentje extra juist wenselijk, niet vanwege het effect, maar de leesbaarheid van je code. In dit geval zou ik er wel voor kiezen, vooral om het makkelijker te realiseren is (zie mijn eigen voorbeeld) en omdat de inhoud dan gegroepeerd is (waar een div-element uiteindelijk voor dient).

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...