Jump to content
amir.karman

center align for img

Recommended Posts

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;	
}

 

dfg-min.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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 🌹

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×