Question

我现在所拥有的是：

<div class="columns">
            <h1>Text</h1>
            <img src="images/camera.jpg">

我的CSS，我基本上有3列，其中包含使用img标签的图片

.columns{
    float: left;
    width: 33.33%;
    margin-right: 0px;
}

.columns img{
    display: inline-block;
    width: 95%;
    margin: 20px;
 }

.columns h1{
    position: absolute;
    color: white;
    margin-top: 12px;
    z-index: 1;
}

如何将文本放在列的中心位置？

Answer 1

  left:50%;
    transform: translateX(-50%);

不仅可以解决您的问题，还可以将容器位置设为相对位置

.columns{
    float: left;
    width: 33.33%;
    margin-right: 0px;
    position:relative
}

.columns img{
    display: inline-block;
    width: 95%;
    margin: 20px;
 }

.columns h1{
    position: absolute;
    color: white;
    margin-top: 12px;
    z-index: 1;
    left:50%;
    transform: translateX(-50%);
 
    
}

<div class="columns">
            <h1>Text</h1>
            <img src="https://i.stack.imgur.com/oSLyH.jpg?s=48&g=1">
            </div>

还有另一种方式

.columns h1{
    position: absolute;
    color: white;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
    margin-top: 12px;
}

Answer 2

将其水平和垂直居中

<div class="columns">
         <div class="subcol">
            <h1>Text</h1>
            <img src="images/camera.jpg">
         </div>
</div>

.columns{
    float: left;
    width: 33.33%;
    margin-right: 0px;
}

.columns img{
    display: inline-block;
    width: 95%;
    margin: 20px;
 }
.subdiv{
  position: relative;
}
.columns h1{
    position: absolute;
    color: white;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

如何将文本放在带有img标签的图像中，然后在该div中居中？

2 个答案: