Menu icon Foundation
How center vertically object in a div

Hello, i have a ROW with 2 div columns: my object into columns are not center vertically and i don't try the way for do this....someone can help me please ???

Here my cose: i use Foundation 5.

<div class="row collapse panel testate">
     <div class="small-6 text-left columns">
         <img src="Somepath" align="middle" alt="" />
     </div>
     <div class="small-6 text-right columns">                
         <div class="small-2 columns text-center">
              <asp:HyperLink skinID="HyperLink2" ID="HyperLink3" runat="server" NavigateUrl="Generali/Accesso.aspx" ToolTip=""></asp:HyperLink>
              <br />
              <asp:HyperLink ID="HyperLink11" runat="server" CssClass ="TestiTestata" NavigateUrl="default.aspx">Text/asp:HyperLink>
         </div>                        
     </div>
</div>

verticalalignmentFoundation 5

Hello, i have a ROW with 2 div columns: my object into columns are not center vertically and i don't try the way for do this....someone can help me please ???

Here my cose: i use Foundation 5.

<div class="row collapse panel testate">
     <div class="small-6 text-left columns">
         <img src="Somepath" align="middle" alt="" />
     </div>
     <div class="small-6 text-right columns">                
         <div class="small-2 columns text-center">
              <asp:HyperLink skinID="HyperLink2" ID="HyperLink3" runat="server" NavigateUrl="Generali/Accesso.aspx" ToolTip=""></asp:HyperLink>
              <br />
              <asp:HyperLink ID="HyperLink11" runat="server" CssClass ="TestiTestata" NavigateUrl="default.aspx">Text/asp:HyperLink>
         </div>                        
     </div>
</div>
kevin neal 11 days ago

Vertical alignment is a lot easier on the latest version of foundation 6

but you could try adding some css to the images

position: relative;
top: 50%;
transform: translateY(-50%);

so long as the row has a height this should vertically centre

Stefano Ravagni 10 days ago

Thanks for your reply....

i solved my problem with this css code:

 

 float: left;
    height: 135px; /* Max height value */
    position: relative;
    width: 100%;
    /*border-radius: 3px;*/
    display: flex;
    align-items: center;
    justify-content: center;

...i tryed your code but don't solve my question....