Question 366206 in Html Question posted in
Some basic documentation can be found here.

Html – How can I align an image next to an h2?

Maybe the tech stack doesn’t matter here, but I have a nextjs project with tailwind for styling. I’m trying to insert an image next to an h2 tag, but the image won’t behave how I expect it to. There is no vertical overlap, it’s like the image is taking up a row, and the text is taking up another row. Here’s what I have right now:

image not behaving

And the code that generated it:

 <div className="pb-3 justify-center align-center">
                <Image
                    src={logoNextjs}
                    alt="logo nextjs"
                    width={100}
                    height={100}
                />
                <div>
                    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
                        Sample
                    </h2>
                </div>
                <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 ">
                    Demo
                </p>
            </div>

If I add a float-left class from tailwind to nextjs’s Image tag, I can get the image and h2 to be somewhat vertically aligned (at least they have some vertical overlap):

some vertical overlap when adding float

But the problem remains that the image is way to the left, when I want it to be right next to the text.

From what I understand, Image is basically an img tag with some optimization, so I think plain css solutions will work.

How can I achieve the behavior of the image being fully vertically aligned with the text, and right next to it?

Tags:

2

Answers


  1. 0

    Try adding a flex-box with justify-content: center:

    <div className="flex flex-col pb-3 justify-center align-center">
  <div className="flex justify-center items-center w-full">
    <Image
      className="flex justify-center items-center w-[10rem]"
      src={
        "https://i.pinimg.com/736x/4a/2b/e7/4a2be73b1e2efb44355436c40bf496dd.jpg"
      }
      alt="logo nextjs"
      width={100}
      height={100}
    />
  </div>

  <div>
    <h2 className="text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl text-center">
      Centralized Image
    </h2>
  </div>
  <p className="text-center pb-1 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 xl:px-48 ">
    Demo
  </p>
</div>

    Result:

    enter image description here

    Login or Signup to reply.
  2. 0

    plain css solutions will work.

    Standard positioning approaches include:

    • floats – a bit anachronistic
    • css tables – not very well known
    • css grid – might be overkill

    and…

    • flexbox – probably the best-fit-solution for this situation

    Working Example:

    header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  height: 124px;
  background-color: rgb(191, 191, 191);
}

img {
  width: 100px;
  height: 100px;
  background-color: rgb(127, 127, 127);
}

h2, p {
  margin: 0;
  text-align: center;
}

h2 {
  margin-bottom: 6px;
}
    <header>
  <img src="" alt="logo nextjs" />
  <div>
    <h2>Sample</h2>
    <p>Demo</p>
  </div>  
</header>

    Learn Flexbox:

    Further Reading:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search