Question

我在HTML页面上有一个标题（h1），标题居中。纵向模式允许图像在该标题上方，并且我希望在将方向更改为横向时图像位于标题的左侧。

我尝试将<br>与@media屏幕和(orientation:portrait/landscape)结合使用和没有任何进展的不同设置。如果我使用浮动左图像仍然留在标题等上方的线上。我真的不知道如何解决它..

<!DOCTYPE HTML> 
<html> 
<body> 
<h1><img>"picture"</img><br>Car</h1> 
</body> 
</html>

有人有任何建议吗？

Answer 1

希望此代码能为您提供帮助。

html代码

<h1><img src="img.jpg" /> <span>Call</span></h1>

普通视图的Css代码

h1{
    text-align:center;
}
h1 img{
    display:inline;
}
h1 span{
    display:block;
}

横向视图的Css代码

h1 span{
    display:inline;
    background-color:#3CF;
    position:relative;
    top:-25px;
}

根据图像高度调整顶部位置。