Image and text not vertical align to middle

Question

I tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.

<div id="fadeshow2toggler" style="text-align:center; width:290px;">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
    <div class="status">1 of 1</div>
    <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
</div>

what is the goal here? pasting what you have I see a column: image, text, image all centered. — Adam, Oct 18 '10 at 13:58
Which elements are you trying to center, within which other elements? The `display` property does not (directly) control horizontal alignment. — Matt Ball, Oct 18 '10 at 13:59
Do some searching... for instance http://stackoverflow.com/questions/732139/vertical-align-middle-does-not-align-to-the-middle-in-firefox — bjudson, Oct 18 '10 at 14:00

score 0 · Answer 1 · answered Oct 18 '10 at 14:00

0

Display will not set any allignment.

This may be what you need.

<style type="text/css">
    .prev, .next, .status{float:left;}
</style>

answered Oct 18 '10 at 14:00

Rocket Ronnie

1,116
8
16

great! float work but cannot center align, so I make do with margin-left, however, if you have a solution, please tell me. Thanks. – JohnMax Oct 18 '10 at 14:52

score 0 · Answer 2 · answered Oct 18 '10 at 14:01

0

try this:

<center>
    <div id="fadeshow2toggler" style="text-align:center; width:290px;">
        <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
        <div class="status">1 of 1</div>
        <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
    </div>
</center>

answered Oct 18 '10 at 14:01

stack72

8,198
1
31
35

1

you didn't really tell us what you wanted :( – stack72 Oct 18 '10 at 14:54
Well, you see, your code layout differently in vertical instead of horizontally but we all feel this code are too tricky :D – JohnMax Oct 18 '10 at 16:50
please clarify in the original question if you want the code horizontally or vertically aligned then as i still dont know what you want it to be like – stack72 Oct 18 '10 at 19:34

score 0 · Answer 3 · answered Oct 18 '10 at 15:21

Can you modify the HTML? If so, add a container for the two anchors and the div like this

<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png"/></a>
    <div class="status">1 of 1</div>
    <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png"/></a>
</div>
</div>

And use this CSS

.linkscontainer{
  margin:0px auto;
  min-width:50%;
}

.status{
  display:inline;
}

Image and text not vertical align to middle

3 Answers3