Question

考虑以下html：

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       Text of variable length
    </div>
</div>

其中：

.image {
    position:relative;
    text-align:center; // doesn't work as desired :(
}

.text {
    position:absolute;
    top:30px;
}

如果有办法在.image div的中心水平对齐文字，请告诉你吗？我无法使用left属性，因为文本的长度未知，text-align属性对.text div不起作用：（

谢谢。

Answer 1

尝试以下CSS：

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

Answer 2

首先，您需要浮动.image元素，以便将其块级后代“折叠”到元素的宽度，然后在text-align元素上使用.text ：

.image {
    float: left;
}
.text {
    text-align: center;
}

JS Fiddle demo

或者您可以简单地给它一个display: inline-block，这将允许它包含其块级内容，并保留在文档流程中：

.image {
    display: inline-block;
}
.text {
    text-align: center;
}

JS Fiddle demo

Answer 3

试试这个：

.image {

    position:relative;
}

.text {
    width:100%;

    height:100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}

Answer 4

你能不能使用background-image将这个图像用作'image'div的背景图像：url（'/ yourUrl /'）;然后，而不是将您的文本放在自己的div中，只需将其放在图像div中，然后应用text-align：center;

Answer 5

使用Flex是更“灵活”的选项：-）

#countdown {
  font-size: 100px;
  z-index: 10;
}

#countdown-div {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bg-image {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
}

<div>
  <div id="countdown-div">
    <h1 id="countdown">10</h1>
  </div>
  <img id="bg-image" src="https://lh3.googleusercontent.com/proxy/PKaxc9qp52MkavbkMnnbu0AZAGcqxJCoa7wIgtCmOr2e1x9ngdsteITX6x4JqDDFOhhdZmF79Ac5yevMGaUmcSaFnFYsHQtLPxHg56X_8PfP1fNkxMNXYd3EzhuCb3eJ2qQA">

</div>

通过CSS在图像上水平居中文本

5 个答案: