Question

当我将图像插入HTML时，出于某种原因它会位于左下角。即使我把位置设定为中心;它停留在那个奇怪的位置。可能导致这种情况的原因是什么？

我的代码：

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

谢谢！

Answer 1

尝试使用position:fixed;＆amp; text-align:center;

像这样：

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

Answer 2

尝试

vertical-align:middle;

将图像保持在中心位置。

图像定位似乎很奇怪

2 个答案: