css 将标题、段落和图像放在一起

qvtsj1bj  于 2023-03-05  发布在  其他
关注(0)|答案(3)|浏览(159)

我试图把一些文本与h3作为标题平行的图像我设法得到的图像和文本这样做,问题是我不能得到我的h3上的文本

#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>

这就是我希望它本质上看起来像与h3作为标题

9wbgstp7

9wbgstp71#

这应该可以达到目的:

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>
uajslkp6

uajslkp62#

/*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>
lkaoscv7

lkaoscv73#

您可以简单地将文本内容 Package 在一个附加的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>

相关问题