CODEWITHSUNDEEP
jqueryhtmlcss
whatever
whatever

Reputation: 342

html elements alignment issues

I am trying to put an image before the input element but they don't align properly and there is no padding or margins applied at all. Let me know why are they out of sync and how to fix it

<div data-postid="14" data-category="link" data-userid="1" 
data-lastcommentid="0">
<img src="images/minicons-06-512.png" height="25" width="25"> 
<input type="text" placeholder="comment" > 
<input type="hidden" value="14">
<input type="hidden" value="link"> <input type="hidden" value="5">
<input type="hidden" value="1"> </div>

http://jsfiddle.net/n2j0nxo8/

Upvotes: 0

Views: 57

Answers (6)

Nickthename
Nickthename

Reputation: 259

Or just:

img, div {
    vertical-align: top;
}

JSfiddle

Upvotes: 0

Silvan
Silvan

Reputation: 156

Just a little float in the image by css:

http://jsfiddle.net/pmjv5shL/

img {
    display: block;
    float: left;    
}
<div data-postid="14" data-category="link" data-userid="1" data-lastcommentid="0"> 
  <img src="images/minicons-06-512.png" height="25" width="25"> 
  <input type="text" placeholder="comment" > 
  <input type="hidden" value="14">
  <input type="hidden" value="link"> 
  <input type="hidden" value="5"> 
  <input type="hidden" value="1"> 
</div>

Upvotes: 1

ARIF MAHMUD RANA
ARIF MAHMUD RANA

Reputation: 5166

You can use css line-height

<div data-postid="14" data-category="link" data-userid="1" data-lastcommentid="0">
    <img src="http://lorempixel.com/25/25/" height="25" width="25">
    <input type="text" placeholder="comment" style="line-height: 25px">
    <input type="hidden" value="14"><input type="hidden" value="link">
    <input type="hidden" value="5">
    <input type="hidden" value="1">
</div>

Upvotes: 0

Aalok Mishra
Aalok Mishra

Reputation: 196

Use the following fiddle. It has been fixed.

http://jsfiddle.net/aalok/n2j0nxo8/4/

It appears that vertical-align: middle; to the img fixes your issue.

Upvotes: 0

praveen_programmer
praveen_programmer

Reputation: 1062

You can use following css to align properly.

img,
div {
  display: inline-block;
  vertical-align: middle;
}
<div data-postid="14" data-category="link" data-userid="1" data-lastcommentid="0">
  <img src="images/minicons-06-512.png" height="25" width="25">
  <input type="text" placeholder="comment">
  <input type="hidden" value="14">
  <input type="hidden" value="link">
  <input type="hidden" value="5">
  <input type="hidden" value="1">
</div>

See demo . http://jsfiddle.net/praveen_programmer/n2j0nxo8/2/

Upvotes: 1

TheLimeTrees
TheLimeTrees

Reputation: 411

Well you could always add this inline or to the CSS.

style="display:inline;"

Are you trying to get the top border level?

Upvotes: 1

Related Questions