Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
It would be very useful if I could center the height of containers and/or their contents. Unfortunately, I can only align both top and bottom. For example, I currently can't get text to always be centered next to an image in a two-column layout. |
||||
|
That's a problem you'll find tons of "solutions" for on the web - it's not easy to solve - even big websites cannot do it easily. Look for example on the youtube website, you'll find that even they cannot do it - if a video on the main page has a two line title and another next to it only one line, than everything doesn't line up anymore. In RocketCake - you can try to do this by having an invisible spacer as large as the image for example. Or do it like in the IT solution template - in the middle you'll see 3 items lining up correctly. That works because they are using items with the same height. |
||||
|
Here it is, as I imagine it. <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Zwei Container mit Rahmen</title> <style> .container { display: flex; align-items: center; /* vertikal zentriert */ gap: 20px; /* Abstand zwischen den Containern */ max-width: 800px; margin: 40px auto; padding: 20px; } .left, .right { flex: 1; border: 2px solid 007BFF; /* blauer Rahmen */ padding: 15px; border-radius: 6px; box-sizing: border-box; } .left img { max-width: 100%; height: auto; display: block; border-radius: 4px; } .right { font-size: 1.2rem; } </style> </head> <body> <div class="container"> <div class="left"> <img src="https://via.placeholder.com/350x200" alt="Beispielbild" /> </div> <div class="right"> <p>Hier steht ein kurzer Text, der vertikal mittig zum Bild ausgerichtet ist.</p> </div> </div> </body> </html> |
||||
|
Hello, i had the same problem. Here is the solution: https://www.ambiera.com/forum.ph... You can See it on the finished page also:http://www.hess-objekt.de |
||||
|
|
){kind=link}