-3

So I have this css :

.footer .light {
    height: 150px;
    background-color: #66cccc;
    text-align: left;
    padding: 15px 42px;
    vertical-align: middle;
}

And then my html looks like this :

<div class="light">
    <img src="images/logo.png" alt="" />            
</div>

This div is the lat part of a footer. Changing stuff in the css result in changes to the style of the div but the image is not in the middle. What am I missing ?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Uri Popov
  • 2,127
  • 2
  • 25
  • 43
  • 1
    _“What am I missing ?”_ - that vertical-align has no effect on block elements like div to begin with, by definition. – CBroe Jun 08 '18 at 13:29
  • 1
    Plus you are missing that centering stuff with CSS in either direction is something that has been discussed to death multiple thousands of times over already. – CBroe Jun 08 '18 at 13:31
  • Please read this post https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div – Artem Dorodovskyi Jun 08 '18 at 13:33
  • @CBroe boy are you the spirit of comunity and positivity. I'm doing baby's first html and yes I did scower previous answer but they did not seem to work. – Uri Popov Jun 08 '18 at 13:39

1 Answers1

-1

try this style

.light{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}
.light img{
    
    
    }
<div class="light">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRTNqG0lSFen_tzyTf0NTkiRBBWJZGK_L0mCssHs172s3B9Cy8" alt="" />            
</div>
Hardik Prajapati
  • 162
  • 6