我想知道如何将文本水平居中放置。与图像水平居中。我不想使用 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>
最佳答案
您可以通过将以下代码添加到父 div
来使用 flexbox 水平居中对齐元素
.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>
关于html - 使用位置 : relative 将文本和图像定位为水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55590213/