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

put a header, paragraph and an image next to each other – Html

i am trying to put some text with h3 as a title parallel to an image
i managed to get the image and the text to do that, the problem is i cant get my h3 on top of the text

#box {
    display: flex;
    align-items: center;
    width: 950px;
    margin:auto;
    margin-top: 30px;
}

#box p {
    margin-right: 1em;
}
            <div id="box">
                <h3>lorem ipsum</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                </p>
        
                <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
            </div>

This is what i want it to essentialy look like with the h3 as title
enter image description here

Tags:

3

Answers


  1. 0 
    /*only for demonstration*/
body{
  margin-left : 22em;
}

.parent-box{
    display : flex;
    flex-direction : column;
    align-items : center;
}

.left {
  text-align:center;
}

.box {
    display: flex;
    align-items: center;
    width: 950px;
    background : black;
    color : white;
}

.box > * {
  margin : 1em;
}
    <div class="parent-box">
  <div class="box">
  <div class="left">
    <h3>lorem ipsum</h3>
     <p>
       Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also use our npm template repo to quickly generate a Bootstrap project via npm.When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately.
      </p>
      
    </div>
        
      <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
  </div>
               
</div>
    Login or Signup to reply.
  2. 0

    This should do the trick:

    body {
  background: black;
  color: white;
}

.box-outer {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 950px;
  margin: auto;
  margin-top: 30px;
}

.box-inner {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.box-inner__body {
  margin-right: 1em;
  text-align: center;
}
    <div class="box-outer">
  <div class="box-inner">
    <h3 class="box-inner__title">lorem ipsum</h3>
    <p class="box-inner__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
  <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>
    Login or Signup to reply.
  3. 0

    You can simply wrap your text content in an additional div:

    #box {
  display: flex;
  align-items: center;
  width: 950px;
  margin: auto;
  margin-top: 30px;
  text-align: center; /* center the inner text */
}

#box p {
  margin-right: 1em;
}
    <div id="box">
  <div>
    <h3>lorem ipsum</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>

  <img width="300" src="https://blog-media.byjusfutureschool.com/bfs-blog/2022/08/18080659/Article-Page-61.png" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search