使用位置将文本和图像水平定位为居中:相对

Question

我想知道如何将文本水平居中定位。与图像水平居中。我不想使用 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>

Answer 1

您可以使用弹性框将项目水平居中对齐，方法是将以下代码添加到父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>

Answer 2

您只需添加一个弹性框容器并将其属性对齐项设置为居中即可。

<div class="container">
  <div class="right-text">Right</div>
  <div class="icon"></div>
  <div class="left-text">Left</div>
</div>

这是类容器：

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 3

嗨，如果你想垂直对齐，这里是更新的代码片段

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");
    top: 10px;
    margin: 0 5px;
}
.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>

Answer 4

你实际上需要用childContainer包装你的right-text、icon和left-text元素，然后将你的childContainer元素包装在parentContainer包装中。

<div class="parentContainer">
  <div class="childContainer">
    <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
  </div>
</div>

接下来，您必须应用具有中心justify-content和align-items值的FlexBox，并且还需要添加height: 100vh。提到的更改应用于以下代码片段。试试这个，希望它能帮助你。谢谢

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;
}
.parentContainer {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

<div class="parentContainer">
  <div class="childContainer">
    <div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
  </div>
</div>