Jump to content

Archived

This topic is now archived and is closed to further replies.

Objectif-Mariage

vertical align a span ?

Recommended Posts

Objectif-Mariage

Hello , 

 

i have share my page in 3 section using that  (with http://docs.pagelines.com/tutorials/responsive-grid )

  1. <div class="row">
  2. <div class="span4">...</div>
  3. <div class="span4">...</div>
  4. <div class="span4">...</div>
  5. </div>

And in one column (for exemple the second one ), i want to put an image and vertical align it ! 

I'm trying with differents technics , but i don't succed ...  I think it should be a reccurent question, but i don't found the answer on the forum ..... :-/

 

i have mad an exemple page here : http://www.objectif-mariage.fr/testverticalalign/

 

Has anyone a solution ? 

 

Alexandre

 

 

Share this post


Link to post
Share on other sites
batman

Hi Alexandre

I´m not sure but, please you can try with

 

.spam4.va { margin-top: 3em;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Objectif-Mariage

hi batman , 

thank you for your answer ... But ... it's not the solution. It works only with one kind of configuration . If you use it with a big or small screen, the .em size change (and so do the margin) , and the result is that the pagination is not always  good .

 

What is wish , is something that estimate the "row" height , and put the center of the image at 50% of it ..... the problem of the .em is that it's a relative value....

Share this post


Link to post
Share on other sites
greenfly

Have you tried to use the three column section? The width is percentage based and therefore responsive. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Objectif-Mariage

Hi martin , 

in fact, i'have the feeling , that the good question is not "how to vertical align the iimage in the div span ? " , but "how to align the content of the div span (when you have at least 2 columns) so all center of them are at the same level ?"

Share this post


Link to post
Share on other sites
Danny

Not sure I follow what you're trying to do, align the image vertically to what exactly ? Can you provide a concept image of what it is you're trying to achieve ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

Hello Danny

Align the image in the .... longeur column ... you are right, given that each column has a différent size , the middle does not mean anything. It's the middle of the "row" div, or middle of the longer one . 
I have made a little picture to explain.

 

 

what we have

image1.jpg

 

what i wish 

 

image2.jpg

Share this post


Link to post
Share on other sites
Danny

Unfortunately, you can't really do that with the currently grid as each of those columns has a different height. It would require extensive CSS and will likely end up with Gridception.

 

You could try nesting grids, but this probably isn't very elegant. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

Thank you Danny for your answer ... 

That 's sad ! :( 

 

have you a particular idea when you suggest to nest grids ? 

Share this post


Link to post
Share on other sites
Danny

Basically, you would nest an empty row above another, then add your image to the second row, like this (untested)

 

<div class="row">
  <div class="span9">
    Level 1
    <div class="row">
      <div class="span9">Level 2...</div>
      <div class="span9">Level 3</div> /* Add your image here */
    </div>
  </div>
</div>
 
If that doesn't work, then you may need to use custom CSS.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

thank you Danny, indeed it's not very elegant :D

Share this post


Link to post
Share on other sites
Danny

Yeah, you could if you wanted, try and implement the Bootstrap 3 grid code into DMS and try and use that in your code instead, it's worth a shot. However, I have tested this personally.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
caspersjan

Hello, I stumbled upon this topic with a related problem. In my header I have to images, in two columns. One is higher, one shorter. As in objectiv-mariage's first image, they are vertically aligned at the top. Would it be possible to make them align at the bottom instead? I tried "vertical-align:baseline;" but that gave me no result. Still perhaps this might be an easier problem to solve? If you could point me in the right direction I'd be very grateful. Yours faithfully, Jan.

Share this post


Link to post
Share on other sites
tsalstrand

caspersjan,

 

Try something like this - however subbing in classes for ids, etc.

 

HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

CSS:

#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Share this post


Link to post
Share on other sites
Danny

caspersjan - Would it be possible for you to create your topic please and provide a link to the site in question.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

thank you Danny for this suggestion ... but, to be honnest, i'm a little bit afraid of this stuff "bootstrap", it seams hard to use for me . A lot of work for not much than vertical align an image... (and not shure to succed !)

 

is not a way to succed with DMS ? 

Share this post


Link to post
Share on other sites
Danny

As I mentioned above, you want to vertically align an element inside a column that has a different height to the other two columns. So the only way would be to wrap that code in a unique class and then give each column a min-height, then you more custom CSS to align your image vertically. We do not provide extensive CSS support, this is something you will need to do on your own or post on stack overflow or a CSS specific forum.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

Hello Danny ,

Yes , give à height to each column could be a good solution ..... (but you have to make as much specific CSS than height you need) (but at least it works).

 

As far as I know it's not possible to apply a value to a variable after having using it ??  I don't know much in CSS... and i have un suggestion , but i think it's not possible. Could you confirm it ? 

 

 the idea would be to declare

- a= (a variable) the height of the column1. 

- fill full the column1 with the stuff (text pictures) , an then attribute the height of the value of the height of the column1 to the variable a ;  Column1.height => a .

- then  use it to create the columun2 : Column1.height => columun2.heigth

 

I know that in C++ it would be possible (to creat a variable during the process and use it after) , but in CSS ..... i very doubt about it .... I think it's just no way ??? right ? 

Share this post


Link to post
Share on other sites
caspersjan

Dear Danny, I worked out my problem. Thank you for your offer of assistance! Yours faithfully, Jan.

Share this post


Link to post
Share on other sites
Danny

caspersjan - No problem.

 

Objectif-Mariage - I have no idea what you're trying to refer to in your post above.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Objectif-Mariage

Danny , 

well , that's probably because i just dreamed of stuff that can not been done in CSS :D

thank by the way :D

Share this post


Link to post
Share on other sites

×