amir.karman Posted September 25, 2018 Share Posted September 25, 2018 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; } Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share Posted September 25, 2018 The anchor is inline it will shrink down to content, drawing the image to the left. As stated in another topic you shouldn't use position: absolute; in this situation. Link to comment Share on other sites More sharing options...
amir.karman Posted September 26, 2018 Author Share Posted September 26, 2018 8 hours ago, dsonesuk said: The anchor is inline it will shrink down to content, drawing the image to the left. As stated in another topic you shouldn't use position: absolute; in this situation. 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 26, 2018 Share Posted September 26, 2018 Option #1 Because the anchor is inline and acts like text would, simply by giving the .hhh selector a text-align: center; will centre it. With this option using margin: 0 auto; would be pointless to use in this case. Option #2 To use .logo selector with margin: 0 auto, the anchor must be the full width of its parent, being an inline element it won't act upon width or height being used. So use display: block, or inline-block, with display: block; the anchor will by default fill the width available to it, while using display: inline-block; will cause the anchor act on any height and width (width: 100%) now used, but has the issue of adding a space after it so the width will be 100% + space, causing to move down slightly. Link to comment Share on other sites More sharing options...
amir.karman Posted September 26, 2018 Author Share Posted September 26, 2018 8 hours ago, dsonesuk said: Option #1 Because the anchor is inline and acts like text would, simply by giving the .hhh selector a text-align: center; will centre it. With this option using margin: 0 auto; would be pointless to use in this case. Option #2 To use .logo selector with margin: 0 auto, the anchor must be the full width of its parent, being an inline element it won't act upon width or height being used. So use display: block, or inline-block, with display: block; the anchor will by default fill the width available to it, while using display: inline-block; will cause the anchor act on any height and width (width: 100%) now used, but has the issue of adding a space after it so the width will be 100% + space, causing to move down slightly. thank you for the time you spent and for the answer you gave. i get it now thanks to you 🌹 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now