how do center image

[kartul]

first, this ain't so easy as it sounds 

 

second, code is:

<p class="searchbar"> 
      <span style="float: left;"><a href="">View unanswered posts</a> | <a href="">View active topics</a></span> 
      <span style="float: left;"><img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far"/></span> 
      <span style="float: right;"><a href="">View new posts</a> | <a href="">View your posts</a></span> 
</p>

well, as you can see, its style from phpBB3. I need to center this image at line 3. so far I have tried everything that as come to my mind. I know that, float must be left or right. otherwise the 4th line will be on another line in browser. I've tried with div, margin 0 auto, center tags, text-align. nothing worked so far. so, is there a way to make it appear center?

to make it more visual:

right now:

View unanswered posts | View active topics[image] ................................................. ....................View new posts | View your posts

but i need:

View unanswered posts | View active topics..................................[image]....................................View new posts | View your posts

 

so, is there any way to do it..?

[DEVILofDARKNESS]

And you're sure this doesnt work?:

<span style="float: left;"><center><img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far"></img></center></span>

[kartul]

And you're sure this doesnt work?:

<span style="float: left;"><center><img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far"></img></center></span>

hmm.. how do say, almost...

the 4th line goes to new line when I use this. but image IS in right place.

visually:

View unanswered posts | View active topics..................................................[image].................................................................

...View new posts | View your posts

[DEVILofDARKNESS]

And if you center whole the span? orall 3 spans?

[kartul]

And if you center whole the span? orall 3 spans?

nope, centering the span, all 3 spans or even the paragraph doesn't work..

[cbolson]

Hi,

Have you tried something like this:

<p class="searchbar">
      <span style="float: left; width:30%;"><a href="">View unanswered posts</a> | <a href="">View active topics</a></span>
      <span style="float: left;width:40%; text-align:center;"><img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far" style="margin:0px auto;"/></span>
      <span style="float: right; width:30%;"><a href="">View new posts</a> | <a href="">View your posts</a></span>
</p>

Chris

[saltedm8]

could you do me a favour.. im having trouble visualising where you want everything to sit.. could you use paintshop or anything like that and just draw boxes of where everything should be and what is essential.. for example.. does it have to be floated left ?

 

I have done this at my best guess

 

<p class="searchbar">
      <span style="float: left;"><a href="">View unanswered posts</a> | <a href="">View active topics</a></span>
      <div align="center"><img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far"/></div>
      <span style="float: right;"><a href="">View new posts</a> | <a href="">View your posts</a></span>
</p>

[sticks464]

You can do it by rearranging your elements and adding a rule to the searchbar css.

I wrote it inline, remove add what you need.

 

<p class="searchbar" style="text-align:center; border:1px solid #000; padding:5px;">
<span style="float: left;"><a href="">View unanswered posts</a> | <a href="">View active topics</a></span> 
<span style="float: right;"><a href="">View new posts</a> | <a href="">View your posts</a></span> 
<img src="./styles/hestia/imageset/bars/donationbar.png" alt="Donations received so far" />
</p>