vertically align css element closer to image

Question

I have a page which serves up random images. below the image is a css element that allows you to vote the image up or down, however, i think the css is a little too below the image. i want it to be vertically closer to the image. can you help?

style.css:

.vot_updown2 {
 position:relative;
 margin:3px;
 width:160px;
 background:#ffffff;
 border:0px solid #ffffff;
 font-family:"Segoe UI", Arial, sans-serif;
 text-align:center;
 padding:2px 1px;
 box-shadow:.17em .2em .23em #ffffff;
 -webkit-box-shadow:.17em .2em .23em #ffffff;
 -moz-border-radius:.7em;
 -webkit-border-radius:.7em;
 -khtml-border-radius:.7em;
 border-radius:.7em;
}

randimg.php snippet:

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        echo "<p>", "<div class='tagtext'>AUTHOR: ", ($row['username']), " ", "TAG: ", ($row['tag']), "</div>";
        echo "<p>", '<img src="' . $row['image'] . '" alt="" />', "<br>";

echo "<div class='vot_updown2' id=" . 'vt_' .$table.($row['id']). "></div>";
    }

I have tried removing the line break, to no avail. attempt to use span instead of div fails to display the element.

razz · Accepted Answer · 2013-11-03T14:55:07.240

1

<p> tags have default margin values, you can adjust the second <p> bottom's margin to bring the vote_updown2 <div> closer to it like so:

add class to the image container ex. image_container:

echo "<p class='image_container'><img src='" . $row['image'] . "' alt='' /></p>";

then add css property to the container and adjust the bottom margin as desired:

.image_container
{
    margin-bottom: 0; //adjust as required
}

js.fiddle

edited Nov 03 '13 at 14:55

answered Nov 03 '13 at 11:32

razz

9,770
7
50
68

hi razzak, i got this error: Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ';' in.... – adeoba Nov 03 '13 at 12:31
yah my mistake, you should use single quote inside double quotes `" 'text' "` or escape the double quote by using backslash `" \"text\" "` otherwise the string will break. – razz Nov 03 '13 at 14:54

score 0 · Answer 2 · answered Nov 03 '13 at 10:41

0

Add this to .vot_updown2:

   margin-top:-10px;

You can change the 10px to

Everything you want.

answered Nov 03 '13 at 10:41

Mark

3,224
2
22
30

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

You can remove the extra white space below the image by giving the img element a "display:block" or "float:left" style declaration. See Remove white space below image

edited May 23 '17 at 11:57

Community

1
1

answered Nov 03 '13 at 11:03

vinniecent

322
2
5

score 0 · Answer 4 · answered Nov 03 '13 at 11:42

0

Add this:

vertical-align:middle;

answered Nov 03 '13 at 11:42

Diego Claudiu

332
1
9

vertically align css element closer to image

4 Answers4