Centrer le texte autour d'une image carrée

En espérant que quelqu'un puisse vous aider. J'ai fondamentalement une image carrée représentant un diagramme et ce que je voudrais faire est de pouvoir placer des descriptions de lien d'URL de ce que le diagramme représente aux positions de 12, 3, 6 et 9 heures.Centrer le texte autour d'une image carrée

Tous centrés le long du haut, du milieu à gauche et à droite de l'image ainsi que du bas.

Les liens de description de l'URL de début et de fin devraient convenir, mais je ne sais pas comment centrer mon texte sur les côtés gauche et droit de l'image.

Espérons que cela a du sens.

Merci. Utilisez simplement le positionnement absolu pour placer les éléments là où vous en avez besoin.

Source

2010-08-31 tonyf

Je ne comprends pas - est l'élément avec un background-image l'élément parent de toutes les descriptions de texte? Peut-être que vous pourriez poster votre code, de sorte qu'il serait plus facile de résoudre le problème – bogatyrjov

Salut. L'image est simplement une image de fond, centrée sur la page. Basé sur cette image, je veux maintenant placer le texte autour des frontières extérieures de l'image de fond – tonyf

Créer un div relativement positionné Mettre en place l'image comme arrière-plan et placer tous les éléments dans ce div avec un positionnement absolu. J'espère que cela pourra aider!

Source

2010-08-31 16:51:46 Michael

L'approche la plus simple est susceptible d'utiliser des tables, mais j'ai utilisé une liste et une liste imbriquée. Il y a une démo posté à jsbin, en utilisant le code ci-dessous:

<!DOCTYPE html> 

<html> 

<head> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" /> 

    <style type="text/css" media="all"> 

    ul { 
    text-align: center; 
    } 

    ul li { 
    line-height: 1.2em; 
    } 

    ul li ul 
    { 
    } 

    ul li ul li 
    { 
    display: inline-block; 
    vertical-align: middle; 
    } 

    ul li ul li img 
    { 
    margin: 0; 
    padding: 0; 
    } 

    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <script type="text/javascript"> 

    </script> 
</head> 

<body> 

    <div id="wrap"> 

    <ul> 
     <li><a href="#linkOne">top link text</a></li> 
     <li> 
     <ul> 
      <li><a href="#linkTwo">left link text</a></li> 
      <li><img src="http://image.bayimg.com/jaccdaabo.jpg" /></li> 
      <li><a href="#linkThree">right link text</a></li> 
     </ul> 
     </li> 
     <li><a href="#linkFour">bottom link text</a></li> 
    </ul> 

    </div> 

</body> 

</html>

Source

2010-08-31 17:04:42

Centrer le texte autour d'une image carrée

Répondre

Questions connexes