amir.karman

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 🌹

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.

18 hours ago, dsonesuk said:

https://www.w3schools.com/code/tryit.asp?filename=FVLGIE5M0TM4

The footer remains at bottom until content extends beyond that of the footer, then it will remain at bottom of content.

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

}

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