时间戳

首页 > 解决方案 > 使用 position: relative 将文本和图像定位为水平居中

html - 使用 position: relative 将文本和图像定位为水平居中

问题描述

我想知道如何将文本水平居中放置。与图像水平居中。我不想使用该position: absolute属性。这是因为左右文本的长度可以改变并且具有绝对属性，您需要固定的宽度/大小。

body {
    padding: 0;
    margin: 0;
}

.right-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
}

.icon {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("https://i.imgur.com/VXlnn8a.png");
}

.left-text {
    position: relative;
    display: inline-block;
    font-family: arial;
    font-size: 13px;
    font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>

标签： htmlcsscss-position

解决方案

您可以通过将以下代码添加到父项来使用 flexbox 将项目水平居中对齐div

.parent{
   display:flex;
   align-items: center;
}

这是具有此更改的代码的运行片段

   

    

    body{
           padding: 0;
           margin: 0;
           font-family: arial;
        }  
.content{
       display: flex;
       align-items: center;
    }

.right-text {
        font-size: 13px;
    }

    .icon {
        width: 32px;
        height: 32px;
        background: url("https://i.imgur.com/VXlnn8a.png");
    }

.left-text {
        font-size: 13px;
        font-weight: 700;
    }
        <div class="content">
           <div class="right-text">Right</div>
           <div class="icon"></div>
           <div class="left-text">Left</div>
        </div>

推荐阅读