there are three title, with similar layout, such as the figure below, which is a written component that writes the data to be passed in the parent, but because the length of the English word on the right is not the same, if you just set a fixed distance with margin-left, the English word is not in the middle of the background picture img
. 
the only solution now is to make the margin margin-left of the English word dynamically get the width of the input data, thus moving half the width of the data.
then the problem arises: how to dynamically obtain the width of the input data
the code is as follows
template
<div class="someone_say">
//
<img src="./../../assets/someone_say.png">
//
<div
class="someone_say_text"
:style="{marginLeft: marginleft +"px"}">
<span class="english_text">{{ message.englishtext }}</span>
</div>
</div>js
export default{
props: ["message"],
data(){
return{
}
},
computed: {
marginleft: function(){
}
}
}how should I calculate the width of the input data someone_say_text?