Home/ Questions/Q 7501063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T20:24:38+00:00

I’m developing a web site and I to show something like this: My current

  • 0

I’m developing a web site and I to show something like this:

enter image description here

My current html code is this:

<body>
    <div id="about">
        <img src="images/aboutCardIcon.png"/>
        <span>About</span>
    </div>
</body>

Is this html code correct? Can I use span tag?

How can I center in the middle About text?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would use the <figure> and <figcaption> elements which are perfect for what you’re trying (html5).

    Here’s an example

    The code used

    HTML

    <figure>
    <img src="image.jpg" alt="Potato">
    <figcaption>A Potato</figcaption>
</figure>

    CSS

    figure {
    border:     1px solid black;
    display:    inline-block;
    text-align: center;
    padding:    20px;
}

figure img {
    float:  left;
    height: 126px;
}

figcaption {
    float:       right;
    height:      126px;
    line-height: 126px;
    margin-left: 50px;
    font-family: Arial, sans-serif;
    font-size:   300%;
}

    Most of the CSS is purely cosmetic, the important parts are the floats places on the image and the <figcaption>, and the set height and line-height on the <figcaption>.

    P.S. the reason I made it white and not black like your example, is because the image I chose had a black background, and I didn’t want it to look hideous. 🙂

    • 0