Ultima modifica:
Salve a tutti, mi trovo parecchio in difficoltà con una pagina che non riesco a completare.
Ho tre immagini in linea (due righe), vorrei che sotto ogni immagine ci sia un testo collegato all'attributo "href" dell'immagine stessa. E vorrei che il testo sia centrato all'immagine e soprattutto che esse rimangano nella stessa posizione, o simile.
Lascio il codice, qualcuno può aiutarmi? grazie.
Un utente di un altro Forum mi ha consigliato questa soluzione, funzionante.
Ho tre immagini in linea (due righe), vorrei che sotto ogni immagine ci sia un testo collegato all'attributo "href" dell'immagine stessa. E vorrei che il testo sia centrato all'immagine e soprattutto che esse rimangano nella stessa posizione, o simile.
Lascio il codice, qualcuno può aiutarmi? grazie.
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Icons with FontAwesome 5 -->
<script src="CENSURATO" crossorigin="anonymous"></script>
<!-- CSS Code -->
<style>
html, body, header{
padding: 0px;
margin: 0px;
background-color: #fefefb;
}
</style>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- Title -->
<title>Piattaforma Servizi - CENSURATO</title>
</head>
<header>
<center>
<img src="CENSURATO" width="250" style="margin-top: 10px;">
</center>
</header>
<body>
<center><div style="margin-top: 20px;"><font style="font-family: 'Roboto', sans-serif; font-size: 25px;">Benvenuto nella Piattaforma Servizi CENSURATO!</font></div></center>
<!-- Container with options. -->
<center>
<div id="container" style="margin-top: 30px;">
<a href="#"><img src="/includes/img/1.png"></a><a href="#"><img src="/includes/img/2.png"></a><a href="#"><img src="/includes/img/3.png"></a><br /><a href="#"><img src="/includes/img/4.png"></a><a href="#"><img src="/includes/img/5.png"></a><a href="#"><img src="/includes/img/6.png"></a>
</div>
</center>
</body>
<footer>
<center>
<small><font style="font-family: 'Roboto', sans-serif; font-size: 15px;">© Copyright <?php echo date("Y"); ?> CENSURATO</font></small>
</center>
</footer>
</html>
Messaggio unito automaticamente:
Un utente di un altro Forum mi ha consigliato questa soluzione, funzionante.
HTML:
<a href="#">
<img src="https://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png" />
<span>TESTO 1</span>
</a>
<a href="#">
<img src="https://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png" />
<span>TESTO 2</span>
</a>
<a href="#">
<img src="https://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png" />
<span>TESTO 3</span>
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a span {
display: block;
text-align: center;
width: 100%;
height: 2em;
color: #000;
background-color: rgba(0,0,0,0.5);
}