Jump to content

center align for img


amir.karman

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

Link to comment
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.

Link to comment
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.

 

Link to comment
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 🌹

Link to comment
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
×
×
  • Create New...