Tink Tink - 3 months ago 6
CSS Question

HTML:How to align an image at left and a heading in centre?

I tried using below code but the heading comes in next line.
The code is given below :

<div style="display:inline;">
<img src="abc.png" style="margin:10px 10px 10px 10px;width:97px;height:50px;" />
<h5 style="display:inline-block">Hello</h5></div>


Incorrect result
Expected Output!!enter image description here

Answer

Change your styles like below. Add float:left; to both img and h5 tags to get your result.

UPDATED OUTPUT

enter image description here

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div style="display: inline-block;width: 100%;">
    <img src="https://smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif" style="float:left;" />
    <h5 style="text-align:center;">Hello</h5>
  </div>
</body>

</html>

Comments