I am learning HTML and CSS. I am trying to fit 9 images in one single horizontal line along with a text below the image but not able to do it

Rutuja
April 29, 2023
124 views
0 votes
2 Answers

            <div class="sliderItem">
                <img src="./image/Accessories.png" width="130" height="80" alt="" class="sliderImg">
                <span class="caption">Accessories</span>
            </div>

I tried in CSS to align them but not getting the expected result.
It is showing images with text below but not on same line.

.sliderItem {
    vertical-align: horizontal;
    display:inline-block;
    text-align: center;
}

.caption{
    display: block
}

Tags: css html

Answers

vertical-align: horizontal is an invalid property value. I couldn’t get what are you expecting it to result.

Anyway consider the following code:
HTML:

<div class="sliderItem">
                <img src="./image/Accessories.png" width="130" height="80" alt="" class="sliderImg">
                <img src="2.png" width="130" height="80" alt="" class="sliderImg">
                <img src="3.png" width="130" height="80" alt="" class="sliderImg">
                <img src="4.png" width="130" height="80" alt="" class="sliderImg">
                <img src="5.png" width="130" height="80" alt="" class="sliderImg">
                <img src="6.png" width="130" height="80" alt="" class="sliderImg">
                <img src="7.png" width="130" height="80" alt="" class="sliderImg">
                <img src="8.png" width="130" height="80" alt="" class="sliderImg">
                <img src="9.png" width="130" height="80" alt="" class="sliderImg">
                <div class="caption">
                  <span>Accessories</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                  <span>5</span>
                  <span>6</span>
                  <span>7</span>
                  <span>8</span>
                  <span>9</span>
                </div>
</div>

CSS:

.sliderItem {
    display:inline-block;
}

.caption{
    width: 1170px;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

There are different solutions. This is one:

<section id="wrapper">
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
    <div>
        <img src="test.png" alt="">
        <span>Accessories</span>
    </div>
</section>

#wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#wrapper div {
    width: clamp(100px,100%,200px);
}

#wrapper div img {
    width: 100%;
    height: auto;
}

#wrapper span {
    font-size: 0.5em;
}

Please signup or login to give your own answer.

Click here to cancel reply.