CODEWITHSUNDEEP
htmlcssimagehyperlinkvertical-alignment
Salim Hossain
Salim Hossain

Reputation: 50

image and multiple line of text and links vertical alignment

I have an image and some text in p tag and link to be aligned vertically. it works nicely when I float the image. but when I use padding left in the p tag and the link, it doesn't get the padding perfectly.


click here to see the image I need look like


here is a fiddle

.wrapper {
  font-family: sans-serif;
  width: 400px;
  margin-top: 30px;
  margin-bottom: 30px;
  clear:both
}

img {
  float: left;
}
p.text {
  padding-left: 30px;
  display: block;
  padding-bottom: 22px;
  color: #222222;
}

a.link {
  text-decoration: none;
  padding-left: 30px;
  text-transform: uppercase;
  line-height: 22px;
  color: #777777;
}

a.date {
  color: #e10622;
  text-decoration: none;
}
<div class="wrapper">
  <img src="https://placehold.it/100x100" alt="">
  <p class="text">Posted By: Simon  | <a href="#" class="date"> 26 July 2016</a></p>
  <a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
  <img src="https://placehold.it/100x100" alt="">
  <p class="text">Posted By: Simon  | <a href="#" class="date"> 26 July 2016</a></p>
  <a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
  <img src="https://placehold.it/100x100" alt="">
  <p class="text">Posted By: Simon  | <a href="#" class="date"> 26 July 2016</a></p>
  <a href="#" class="link">Days are all happiness is key
and Free</a>
</div>


<br>
<br>
<br>

<a href="http://prntscr.com/cpusej" style="text-align:center; display: block; padding: 10px; background: #f44; font-size: 18px">Please see here what I need</a>




thanks in advance. :)

Upvotes: 2

Views: 432

Answers (2)

KyleM
KyleM

Reputation: 1

I have a quick solution for you. Looks like you needed to add a container around the text and then add the padding you wish. See below for quick instructions.

Add the following to your css:

div.textcontainer{
padding-left:130px
}

Also remove padding-left:30px from p.text as shown below:

p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}

and lastly add a container around the text as below:

<div class="textcontainer">
//Insert coding you wish
</div>

This is the quick fix to your solution. Ideally you would want to use something like bootstrap or some other css frame work to make this fluid in design. I hope this works for you.

Upvotes: 0

manwill
manwill

Reputation: 457

You need to add display: block; to your a.link class styles. Also, set margin-right: 30px; on your image, and remove the padding-left: 30px; styles from your p.text and a.link elements. Final CSS would be as follows:

.wrapper {
    font-family: sans-serif;
    width: 400px;
    margin-top: 30px;
    margin-bottom: 30px;
}

img {
    float: left;
    margin-right: 30px;
}
p.text {
    display: block;
    padding-bottom: 22px;
    color: #222222;
}

a.link {
    text-decoration: none;
    text-transform: uppercase;
    line-height: 22px;
    color: #777777;
    display: block;
}

Upvotes: 2

Related Questions