Question

标题几乎说出来了，我有一张图片上面有文字。而且我希望它始终保持水平和垂直居中。现在我正在用

做

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

但它似乎不适用于不同的分辨率。那么如何实现这种布局呢？

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

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

那应该成功。

Answer 2

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

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

希望有所帮助。

Answer 3

如果您可以将文本放在div或span中，则可以轻松地将它们对齐以使其居中。通过挖掘，你所有的都是

margin: auto

Answer 4

应该这样做：

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

Answer 5

首先：应删除headerText之后的冒号。第二：我认为headerText是一个类选择器，因此您必须将.添加到headerText

我建议将图片设置为background-image。然后你可以做以下事情然后：

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

但这取决于您的图片是否必须是网页内容的一部分，还是仅限于设计/风格。这种解决方案仅在后一种情况下才有意义。

Answer 6

垂直居中的简单修复。

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

如何居中图像的背景文本

6 个答案: