0

标题几乎说明了这一点，我有一张图片，上面有文字。而且我想保持它始终居中，水平和垂直。现在我正在做

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
}

但它似乎不适用于不同的分辨率。那么还有其他方法可以实现这种布局吗？

链接到网站（黄色标题是我要居中的文字）

4

6 回答 6

1

只需将跨度移动到图像标签之前，如下所示：

<div class="header">
    <span class="headerText">Ubytovna Stavařov Přerov</span>´
    <img src="css/title578145459.png" class="headerImage left">
    <img src="css/title756941752.png" class="headerImage right">            
</div>

你的标题文本css需要是

.headerText {
    float: left;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40%;
    z-index: 1;
    color: yellow;
    font: bolder 6em justus;
    font-style: oblique;
}

那应该可以。

于 2013-03-17T19:42:52.663 回答
1

另一种方法是将以下 CSS 添加到 .headerText 样式中：

width: 100%;
text-align: center;
left: 0;

希望有帮助。

于 2013-03-17T19:48:40.950 回答
0

如果您可以将文本放在 div 或 span 中，那么您可以轻松地将它们对齐以居中。随着挖掘，你所需要的只是

margin: auto
于 2013-03-17T19:42:09.027 回答
0

那应该这样做：

headerText: {
    position: absolute;
    top: 40%;
    left: 5%;
    margin: auto;
}
于 2013-03-17T19:43:26.807 回答
0

第一：后面的冒号headerText应该去掉。第二：我假设headerText是一个类选择器，所以你必须在前面加上.一个headerText

我建议将图像设置为background-image. 然后您可以执行以下操作然后：

.headerText {
    background-image: url(path/to/your/image.png)
    background-position: center center;
    background-repeat: no-repeat;
}

但这取决于您的图像是否必须是页面内容的一部分，或者它只是设计/样式。该解决方案仅在后一种情况下才有意义。

于 2013-03-17T19:44:57.300 回答
0

垂直居中的简单修复。

.headerText{
  position:absolute;
  top:0px;
  line-height:190px;
}

确保为不同的分辨率修改高度，具体取决于标题文字的换行位置 - 大量行高看起来很糟糕，换行。

水平居中也很快：

.headerText{
  position:absolute;
  left:0px;
  right:0px;
  text-align:center;
}

现在都在一起了：

.headerText{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  line-height:190px;
  text-align:center;
}
于 2013-03-17T20:40:26.357 回答