CODEWITHSUNDEEP
htmlcssimagecss-float
user1557910
user1557910

Reputation:

Display text alongside images in the same line?

I want to have text to the left of images and in the same line.

How do I do that?

HTML :

<p class="steps">some text</p>
<img class="images"src="images/1.png" width="800">

<p class="steps">some text</p>
<img class="images"src="images/2.png" width="800">

<p class="steps">some text</p>
<img class="images"src="images/3.png" width="800">

CSS:

  .images
    {
    float : right;
    }

    .steps
    {
    float : left;

    }

But this isn't doing it.

I'm getting image after text but not side by side.I also want to have the text at half the height of the image.

How do I do this? Thanks in advance!

Upvotes: 0

Views: 637

Answers (3)

LOTUSMS
LOTUSMS

Reputation: 10290

You need some restructure in your HTML. Here is your answer and DEMO

.steps {
   float: left;
   padding:0px 10px;
   vertical-align:middle;
}
.steps img{
   display:inline;
   vertical-align:middle;
}

DEMO

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

<section>
    <figure>
        <img class=images src=https://i.sstatic.net/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=https://i.sstatic.net/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=https://i.sstatic.net/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>
    <figure>
        <img class=images src=https://i.sstatic.net/mYZ6I.png/>
        <figcaption class=steps>some text</figcaption>
    </figure>        
</section>

css:

*{
    padding:0;
    margin:0;
}

figure{
    width:25%;
    float:left;/*you need this*/
}

Upvotes: 1

T J
T J

Reputation: 43166

<p> is a block element, which forces a line break before and after it. Changing it's display to inline or inline-block will do.

p{
 display:inline;
}

In your case

.steps
{
 float : left;
 display:inline;
}

Upvotes: 2

Related Questions