如何解决我的聊天气泡中的文本对齐方式？

问题描述

我需要一个简单的html解决方案来将聊天气泡中的文本的第一行对齐（如下）。我使用负的边距值定位气泡剪辑，但这也使文本也向左移动。有什么功能可以输入我的样式来解决吗？

非常感谢您提出任何建议...

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chatBox {
    position: absolute;
    width: 400px;
    padding: 50px;
    padding-top: 10px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
    grid-template-columns: 500px;
    display: grid;
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 0px 30px 30px 30px;
    background-color:rgba(0,.3);
}
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
}
    .right {
    right:15px;
}

<div class="chatBox">
<div style="height:200px"><p class="bubble chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="15" style="margin-left:-30px;">text is too left here,need to position it 15px to the right please?</p></div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

divide html styles text-alignment