Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 31, 2023 at 6:24 pm #1417718
    bbertuzzi7

    I am using the Tabs element on a website. Within each tab there is text and an image next to each other. Is there a way to vertically align the text to the image? I have a custom ID already set to style the tabs, the images and the content. The website link is below. Here is the CSS code that is already in place. Thanks!

    #custom-tab-wrapper-3 .tab_titles {
    text-align: center !important;
    font-size: 26px !important;
    }

    #custom-tab-wrapper-3 .tab_titles .tab {
    display: inline-block !important;
    float: none !important;
    background-color: #FFFFFF !important;
    }

    #custom-tab-wrapper-3 .tab {
    width: 33% !important;
    }

    #custom-tab-wrapper-3 a.avia-button {
    background-color: #3b444e !important;
    color: #FFFFFF !important;
    border: 3px solid !important;
    border-color: #3b444e !important;
    border-radius: 10px !important;
    }

    #custom-tab-wrapper-3 a.avia-button:hover {
    background-color: #ffffff !important;
    color: #3b444e !important;
    border: 3px solid #3b444e !important;
    border-color: #3b444e !important;
    font-weight: bold !important;
    }

    #custom-tab-wrapper-3 .tab {
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-color: #EBEBEB !important;
    }

    #custom-tab-wrapper-3 .active_tab {
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-style: solid !important;
    border-bottom-width: 3px !important;
    border-color: #E41A67 !important;
    }

    #custom-tab-wrapper-3 .tab_inner_content {
    margin-top: 50px !important;
    vertical-align: middle !important;
    background-color: #FFFFFF !important;
    }

    #custom-tab-wrapper-3 .custom-tab-image {
    margin-left: 50px !important;
    vertical-align: middle !important;
    border-radius: 15px;
    }

    #custom-tab-wrapper-3 h3 {
    margin-top: 25px !important;
    padding-bottom: 5px !important;
    }

    #custom-tab-wrapper-3 .tab_content {
    padding: 0px 40px 40px 40px !important;
    background-color: #FFFFFF !important;
    }

    September 2, 2023 at 7:07 pm #1417897
    Mike

    Hey bbertuzzi7,
    Thanks for your patience and the link to your site, it looks like the image is in the h3 heading tag.
    Try setting the image to absolute position, and the text to 50% wide and the content with more top margin and the image with a negative top margin so the content is vertically centered with the image.
    Try adding this css:

    #custom-tab-wrapper-3 .custom-tab-image {
	margin-top: -100px;
    position: absolute;
    right: 0;
}
#custom-tab-wrapper-3 .tab_inner_content p {
	width: 50%;
}
#custom-tab-wrapper-3 .tab_inner_content {
    margin-top: 150px !important;
    height: 450px;
}

    the expected results:
    Enfold_Support_3109.jpeg

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.