CODEWITHSUNDEEP
htmlcssimagetextdisplay
Oyyfcyocy
Oyyfcyocy

Reputation: 1

put a paragraph above a image centered between two images

i have 3 images one on the left one on the right and one in the middle. The way the images are layed out

the code for them in html is this

<div class="container" style="text-align:center">
<div class="row">
    <div class="column">

        <img width="30%" src="images/skeleton.gif">
        <img src="images/logo.gif" height="100px">

        <img width="30%" src="images/skeleton.gif" position: absolute; and right: 0;>

    </div>
</div>

and the css

position: relative;
user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

how would i go about putting a paragraph/text in the blank space above the image in the middle

Upvotes: 0

Views: 80

Answers (2)

Tokage Dizayn
Tokage Dizayn

Reputation: 94

<div class="container">
<div class="row">
    <div class="col float-left">
        <img src="images/skeleton.gif">
    </div>
    <div class="col float-center">
        <div class="row">
            <div class="col-12"><p> your paragraph </p></div>
            <div class="col-12"><img src="images/logo.gif" height="100"></div>
        </div>
    </div>
    <div class="col float-right"><img  src="images/skeleton.gif"></div>
</div>
</div>

Upvotes: 1

sol
sol

Reputation: 22959

.row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
  grid-gap: 1rem;
  text-align: center;
}

img {
  max-width: 100%;
}

figure {
  margin: 0;
}
<div class="container">
  <div class="row">
    <div class="column">
      <figure>
        <img src="https://placehold.it/400">
      </figure>
    </div>

    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <figure>
        <img src="https://placehold.it/100">
      </figure>
    </div>

    <div class="column">
      <figure>
        <img src="https://placehold.it/400">
      </figure>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions