[HTML] 2 afbeeldingen naast elkaar centreren (MAC)

Geplaatst: 18 september 201410 jaren

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:

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:

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.

Reageren

Geplaatst: 18 september 201410 jaren

comment_2235526

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.

Reageren

Geplaatst: 18 september 201410 jaren

comment_2235543

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: 18 september 201410 jaren door Davedavy

Reageren

Geplaatst: 19 september 201410 jaren

comment_2235701

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: 19 september 201410 jaren door Larsiexd

Reageren

1 maand later...

Geplaatst: 5 november 201410 jaren

comment_2249476

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?

Reageren

Geplaatst: 5 november 201410 jaren

comment_2249480

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?

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).

Reageren