Question

我对此很陌生

我正在尝试在浮动的右侧图像旁边创建文本，该背景图像具有响应性。本节将作为文章的一部分显示，但样式仅适用于本节。

以下代码似乎有效，但是我希望文本与图像垂直对齐。使文本显示在图像的中间。

我似乎无法实现这一目标

我已经定义 <img style="float: right; vertical-align: middle;">

这是代码（https://codepen.io/Masseve/pen/LMoMyW/）

<div id="blogcontent">   
<img style="float: right; vertical-align: middle;" src="https://image.shutterstock.com/z/stock-photo-city-interchange-closeup-at-night-beautiful-transport-infrastructure-background-267836915.jpg" width="700"/> 
<div id="textcontent">
<H1> A Title </h1>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>                                                                                                                              
</div>
</div>                                                                                                                               

#blogcontent {
border-radius: 4px;
background-color: #ebe9e5;
display: inline-table;
}

#textcontent {
Padding: 20px
}

Answer 1

这是一个小例子：D

.wrapper {
  display: flex;  
  flex-flow: row wrap;
}

.main {
  text-align: left;
  background: deepskyblue;
  flex:1.5
}


.aside-1 {
  background: purple;
   flex:1
}
.image{
  width:100%;
  height:100%;
  background-image:url('https://image.shutterstock.com/z/stock-photo-city-interchange-closeup-at-night-beautiful-transport-infrastructure-background-267836915.jpg');
  background-size:cover;
}

@media all and (min-width: 600px) {
      .aside { flex: 1; }
    }

/*@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .main    { order: 1; }
  .aside-1 { order: 2; } 
 
}*/

<div class="wrapper">
  <article class="main">
   <h1> A Title </h1>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P>                                                  
                    <br>
                                        <br>
  </article>
  <aside class="aside aside-1">
  <div class="image"></div>
  </aside>
</div>

响应式垂直对齐浮动右图像和文本

1 个答案: