CODEWITHSUNDEEP
htmlcss
mistycloud
mistycloud

Reputation: 19

align the text with the image

I need to align the text with the image.

I tried, align top, align center for the image. As well as float left and right for image and text respectively. Still no avail.

<p>
  <img class="calendar" src="img/calendar-icon.png" /> 
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
</p>

have screenshot and post the result as above code and what i exactly want.

enter image description here

Upvotes: 1

Views: 75

Answers (6)

Rachel Gallen
Rachel Gallen

Reputation: 28563

You'd have more control over styling your text if you contained it in within paragraph or span tags. As you have both text and an image you'd probably be better advised to use a div tag to surround the p and the img, rather than a paragraph tag. In the code, I've left the 'p' surround and used a span around the text, but consider this in future.

If you want to align both the image and text to center, then you could use 

vertical-align:middle;

If you want to break the text up, you can insert br tags within the span tags (as I have done).. Take them out if they are surplus to requirements.

Hope this helps

#sysdown {
  width: 100%;
}

img.calendar {
  width: 70px;
  height: 70px;
}

#sysdown>span {
  display: inline-block;
}

img,
span {
  vertical-align: middle;
}
<p id="sysdown">
  <img class="calendar" src="img/calendar-icon.png" />
  <span>System will go under maintenance from <br/>15 Jan 2019 06.00 to 20 Jan 2019 10.00.<br/> Sorry for any inconvenience caused.</span>
</p>

Upvotes: 0

fahd4007
fahd4007

Reputation: 544

simply add align attribute in img tag, value "left", checkout this

<img src="https://image.flaticon.com/icons/png/512/26/26012.png" align="left" style="
    width: 50px;
    padding-right: 20px;
">

Upvotes: 0

adel
adel

Reputation: 3507

.image {
  margin-right: 10px;
    float:left;
}
<div>
  <img class="image" src="https://via.placeholder.com/50" />
  <span>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
      System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.  System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.
  </span>
</div>

this method is with float !

Upvotes: 0

Stefan Joseph
Stefan Joseph

Reputation: 555

Try using display: flex;. This is a sample code. Hope it helps you.

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.image {
  margin-right: 10px;
}
<div class="d-flex flex-row align-items-center">
  <img class="image" src="https://via.placeholder.com/50" />
  <span>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.</span>
</div>

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3323

If you want the image and text on the same line and the text to be on the top then just apply this CSS to the p tag

p{
   display: flex;
}

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Use Flex

.list{display:flex;}
.img-block{width:80px; margin-right:20px}
.img-block img{max-width:100%}
p{margin:0;}
<div class="list">
<div class="img-block">
  <img src="https://image.flaticon.com/icons/png/512/26/26012.png" />
</div>
<p>System will go under maintenance from 15 Jan 2019 06.00 to 20 Jan 2019 10.00. Sorry for any inconveniences caused.</p>
<div>

Upvotes: 1

Related Questions