Jump to content

amir.karman

Members
  • Content Count

    4
  • Joined

  • Last visited

Community Reputation

0 Neutral

About amir.karman

  • Rank
    Newbie

Profile Information

  • Gender
    Male
  1. amir.karman

    center align for img

    thank you for the time you spent and for the answer you gave. i get it now thanks to you 🌹
  2. amir.karman

    center align for img

    thank you for your answer yes like you said <a> display is inline and that also effects on <img> . so img is pushed to the left. how can i push it back to the center while it is still inline? i used position because absolute positioning removes the element from the flow of the page.
  3. amir.karman

    Keeping a Footer on the Bottom - Issue with W3Schools Sample Code

    i tried something like the code u sent... (my footer has a certain width of 60px for example. i want it right in the middle and in the footer: <div class="down"> <div class="downcenter"> footer </div> </div> <style> .down{ } .downcenter{ bottom: 0; position: absolute; display: block; background-color: rgba(0,0,0,.5); color:#fdfdfd; width: 100px; height:20px; margin-left: auto; margin-right: auto; } </style> but it wont work it goes to the left and stick there! i even tried this but it is in left corner and wont move to center: .down{ bottom: 0; position: absolute; height: 20px; width: 200px; margin:0 auto; } .downcenter{ display: block; background-color: rgba(0,0,0,.5); color:#fdfdfd; width:100%; }
  4. amir.karman

    center align for img

    Hi i started css for not so long. therefore it might sounds ridiculous to u. but i need to figure it out. i am REcreating my chrome's google homepage i designed a Google logo, its PNG and i want it exactly in the center of page. take look what i've done: <div class="hhh"> <a href="https://www.google.com/"><img src="Logo.png" alt="google" class="logo" ></a> </div> here is the css for it: .hhh { position: absolute; width: 100%; height: 150px; margin: 120px auto; background-color: rgba(0,0,0,.30); } .logo { position: relative; margin: 0 auto; max-width: 450px; max-height: 145px; } for some reasons (that i want to know) logo wont stand in the middle. it sticks to left side! though i got my preferred result with the code i'll write down bellow but it is Display= Block. i want inline display not block!: .hhh { } .logo { margin: 120px auto; max-height: 150px; max-width: 500px; display: block; }
×