CODEWITHSUNDEEP
htmlcss
user3066560
user3066560

Reputation: 35

Image positioning seems strange

When I insert an image into my HTML it gets positioned in the lower left corner for some reason. Even if I set position to center; it stays in that strange position. What could be causing this?

My code:

<!DOCTYPE HTML>
<html>
    <header>
        <title>Animation Verkefni</title>
        <link type="text/css" href="stylesheet2.css" rel="stylesheet"/>
    </header>

    <body>
    <div class="doge1">
        <p>
        Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
        </p>
    </div>

    <div class="doge2">
        <img src="spengbab.jpg">
    </div>
    </body>
</html>

css:

body {
background-color:gray;
}

p {
font-size:50px;
margin-left:500px;
margin-right:500px;
text-align:center;
margin-top:250px;
font-family:impact;
}

@keyframes myfirst
{
0%   {opacity:1;}
25%  {opacity:2;}
50%  {opacity:3;}
75%  {opacity:4;}
100% {opacity:10;}
}

@-webkit-keyframes myfirst /* Safari og Chrome */
{
0%   {opacity:1;}
25%  {opacity:2;}
50%  {opacity:3;}
75%  {opacity:4;}
100% {opacity:10;}
}
.doge2 {
position:fixed center;
top:20px;
}

.doge1:hover
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari og Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Thanks!

Upvotes: 0

Views: 61

Answers (2)

Anand Jha
Anand Jha

Reputation: 10724

Try with 

vertical-align:middle;

to keep image at center position.

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

Try using position:fixed; & text-align:center;

Like this:

.doge2 {
    position:fixed;
    top:20px;
    width:100%;
    text-align:center;
}

Upvotes: 1

Related Questions