MyBB Community Forums

I want to add an image left side of author name. i having trouble with the css

using browser inspect i tried to add this but image is not align properly.

<div><span class="author smalltext"><img src="https://i.imgur.com/vYThCTL.png"> <a href="http://localhost:8080/newb/member.php?action=profile&amp;uid=1">admin</a>, </span><span class="thread_start_datetime smalltext"><span title="08-08-2022, 01:06 PM">Less than 1 minute ago</span></span></div>

here is the output
https://i.imgur.com/KHGhhHC.png

any help please?

.content {
    width: 400px;
    border: 4px solid red;
    padding: 20px;
    overflow: hidden;
}

.content img {
    margin-right: 15px;
    float: left;
}

.content h3,
.content p{
    margin-left: 15px;
    display: block;
    margin: 2px 0 0 0;
}

<div class="content">
    <img src="image.png"/ alt="" >
    <h3>Title</h3>
    <p>Some Description</p>
</div>

Obviously change a few values to suit your needs.

thanks but i think you did not understand properly what I meant, or may be I explain it wrong or something. i want to add image left side of the author title in forumdisplay->thread list.

If you want it to align properly, you either need to wrap it in a div (as I showed you above) or you can wrap that section in a row and column and use vertical-align:middle to justify its position.

i tried vertical-align:middle for image class. same result.

<div style="display:inline-block;vertical-align:middle;">
<img src="https://www.pngitem.com/pimgs/m/148-1489584_chat-png-icon-free-download-searchpng-blue-chat.png" alt="img" style="width: 16px; height: 16px"/>
</div>
<div style="display:inline-block;">
<p>
Your MyBB text.
</p>
</div>

I've done it this way without alternate CSS.

https://jsfiddle.net/7veymax1/

---

Making sure that your image doesn't exceed the height of your text is important as well. That's why in the above fiddle I pushed a height and width limitation on the image to be equal to and not greater than the text height (which is usually standard at 16px).