0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

Howto valign text in grid?

Last Post
Search Topic
    • Imothep's Avatar
    • Imothep
    • Rocketeer
    • Posts: 90
    • Thanks: 0

    Howto valign text in grid?

    Posted 13 years 6 months ago
    • Hello!

      I'm renewing a site for a friend of mine, and I have a problem which surely is quite easy to solve.

      I'm using the rt-demo-grid class in an article, placing text and images side by side
      <div class="rt-demo-grid-4">
<p>Zuerst wird eine ovale Ausnehmung eingefräst, durch die man eine Öse schieben kann. Die ovale Ausnehmung gibt der Zuchtperle genug Bewegungsfreiheit...</p>
</div>
<div class="rt-demo-grid-4">
{rokbox title=|Perl- und Diamantohrgehänge| }images/stories/artikelbilder/perldiamantohr/perl_diamant_ohrgehaenge_1.jpg{/rokbox}
</div>
<div class="clear"></div>
<br />
 
 
 
<div class="rt-demo-grid-4">
{rokbox title=|Perl- und Diamantohrgehänge|}images/stories/artikelbilder/perldiamantohr/perl_diamant_ohrgehaenge_14.jpg{/rokbox}
</div>
<div class="rt-demo-grid-4">
<p>...um zu pendeln. In diesen Haken wird später die Öse der Zuchtperle eingehängt. Er wird innen bei der gefrästen Öffnung so platziert, dass die Kerbe, in der...</p>
</div>
<div class="clear"></div>
<br />
 

      This is how it looks like:

      This image is hidden for guests.
      Please log in or register to see it.


      Is it possible to center the text vertically near each image?
      Thanks for your input, I'm still struggling with css. :oops:
    #734361
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: Howto valign text in grid?

    Posted 13 years 6 months ago
    • you will need to add padding-top to the text div.

      like so:
      <div class="rt-demo-grid-4" padding-top: 50px;">
<p>Zuerst wird eine ovale Ausnehmung eingefräst, durch die man eine Öse schieben kann. Die ovale Ausnehmung gibt der Zuchtperle genug Bewegungsfreiheit...</p>
</div>
<div class="rt-demo-grid-4">
{rokbox title=|Perl- und Diamantohrgehänge| }images/stories/artikelbilder/perldiamantohr/perl_diamant_ohrgehaenge_1.jpg{/rokbox}
</div>
<div class="clear"></div>
<br />
 
 
 
<div class="rt-demo-grid-4">
{rokbox title=|Perl- und Diamantohrgehänge|}images/stories/artikelbilder/perldiamantohr/perl_diamant_ohrgehaenge_14.jpg{/rokbox}
</div>
<div class="rt-demo-grid-4" style="padding-top: 50px;">
<p>...um zu pendeln. In diesen Haken wird später die Öse der Zuchtperle eingehängt. Er wird innen bei der gefrästen Öffnung so platziert, dass die Kerbe, in der...</p>
</div>
<div class="clear"></div>
<br />
      You will need to adjust this on a per item basis unless the div heights are all the same then you could include a class and add the padding once via CSS
    #734581

Time to create page: 0.053 seconds