Search code examples
htmlalignment

How to fix alignment of text not image in div?

Is it possible to align my text to the vertical middle. I've used valign, text-align and padding but will doesn't work. Also, I don't want any image to align with text.

Solution needs to be HTML only.enter image description here

body {
    background-color: #6B6B6B;
    margin: 50px;
<div style="background:#2f2f2f;height:42px;width:250px;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>

Solution

  • Just add to the div.

    display: flex;
align-items: center;


    body {
    background-color: #6B6B6B;
    margin: 50px;
    <div style="background:#2f2f2f;height:42px;width:250px;display: flex;
align-items: center;"><i><b style="padding-top:10px;text-align:middle">Text</a></div>

    Also, the html format is not valid, a better code would be something like this:

    body {
    background-color: #6B6B6B;
    margin: 50px;
}

   .container {
    background: #2f2f2f;
    height: 42px;
    width: 250px;
    display: flex;
    align-items: center;
}
    <div class="container">
    <span>Text</span>
</div>