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

How do you center an image with paragraphs and headings to the right in HTML?

My code is like this:

div {
  justify-content: center;
  display: flex;
}
<div id="unknowing">
  <img src="" height="200" width="350">
</div>
<div id="house">
  <h1>Ancient Rome</h1>
</div>
<div id="puzzle">
  <p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
</div>

Unfortunately, I only got Ancient Rome below the image, but I want the heading and paragraph next to the image in the center. I tried to display the image as inline, but that didn’t work because the image went to the left, I tried to use float but it didn’t do anything.

Tags:

2

Answers


  1. 0

    just move the h1 tag into the div #unknowing

    Login or Signup to reply.
  2. 0

    You can change the wrapper element of your content like this

    <html>

<body>
  <div>
    <div id="unknowing">
      <img src="" height="200" width="350">
    </div>
    <div id="house">
      <h1>Ancient Rome</h1>
    </div>
    <div id="puzzle">
      <p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
    </div>
  </div>
  <style>
    body {
      display: flex;
    }

    body>div {
      width: 80%;
      margin: auto;
    }

    img {
      float: left;
      margin-right: 10px;
    }
  </style>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search