The code: (Between footer=""" and """ includes html format code)

footer="""<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
        a:link , a:visited{
        color: blue;
        background-color: transparent;
        text-decoration: underline;
        }
                    
       a:hover,  a:active {
       color: red;
       background-color: transparent;
       text-decoration: underline;
       }
                    
       .footer {
       position: static ;
       left: 0;
       bottom:0;
       width:100%;
       background-color:white ;
       color: black;
       text-align: center;
       }
 </style>
       <div >
       <p><b>Get In Touch With Me</b>
       <a style='display: block; text-align: center;'  href="https://www.linkedin.com" target="_blank"></a></p>
       <a href="https://www.linkedin.com"> 
       <img alt="Qries" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"    
       width=50" height="50"><img alt2="Qries" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
       width=50" height="50">                                                 
       </a>
       </div>
   """
st.markdown(footer,unsafe_allow_html=True)  

Hello, I'm building a web application in Python and HTML with a streamlit structure. I could not move the icons and the text ("Get In Touch With Me") to the middle of the page. In addition, I could not change the size of the text ("Get In Touch With Me"). Finally, I cannot go to

CodePudding user response：

in your styles you set style rules for .footer but in container div you set class attr value equal to header. you can check this code snippet:

<div >
        <p><b>Get In Touch With Me</b></p>
        <a href="https://stackoverflow.com/"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
                alt="stackoverflow icon" width="60" height="60"></a>
        <a href="https://www.linkedin.com"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
                alt="linkedin icon" width="60" height="60">
        </a>
</div>

<style>
        img {
            max-width: 100%;
        
        }
        a:link,
        a:visited {
            color: blue;
            background-color: transparent;
            text-decoration: underline;
        }

        a:hover,
        a:active {
            color: red;
            background-color: transparent;
            text-decoration: underline;
        }

        .footer {
            position: static;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: white;
            color: black;
            text-align: center;
        }
</style>

CodePudding user response：

        <div>
            <p >
                Contact me
            </p>
            <p >
                <a href="#">
                    <img url="img1.jpg">
                </a>
                <a href="#">
                    <img url="img2.jpg">
                </a>
            </p>
        </div>

text-center - aligns text to the center of the element

to make the images clickable you need to place them inside the tag.

to resize/style the elements you need to reference them in css

.text-center{
    text-align: center;
}
.footer-text{
    font-size: 1rem;
}
.icons{
    display: flex;
    justify-content: center;
}