垂直多行文字和图像阵容

Question

所以我需要对齐图像和文本，使文本正好位于图像的中间，如下所示：

这是我的代码，但文字仍位于首位：

<div class="container">

 <img src="#" alt="#" /> 

<div class="text">

 headline and text below it

</div> 
</div> 

.container {width: 600px; margin: 0 auto; clear: both;} 
.container img {float: left;} 
.container .text {float: right; vertical-align: middle;}

Answer 1

你需要更改.container .text float的CSS而不是float：就像那样：

.container img {float: left; width: 300px; height: 300px} 
.container .text {float: left; vertical-align: middle;margin-left:15px}

Answer 2

尝试以下

<div class="container">
  <div class="img">
    <img src="#" alt="#" /> 
  </div>
  <div class="text">
    headline and text below it
   </div> 
</div> 
<div class="clear"></div>

.clear {clear: both}
.container {width: 600px; margin: 0 auto;} 
.img {float: left;} 
.container .text {float: left; vertical-align: middle;}

Answer 3

您可以尝试使用表结构来实现此目的。检查一下

DEMO

HTML

<div class="wrapper">
<div class="container">
    <img src="http://lorempixel.com/200/200" alt="#" /> 
    <div class="text">
        <h1>Heading 1</h1>
     headline and text below it
    </div> 
</div> 
</div>

CSS

.wrapper{
    width:600px;
    display:table;
}
.container {
    width: 600px; 
    margin: 0 auto; 
    clear: both;
    display:table-row;
} 
.container img {
    display:table-cell;
    padding-right:10px;
} 
.container .text {
    display:table-cell; 
    vertical-align: middle;
    width:60%;
}

Answer 4

以下是requirement

的演示

您必须根据您的要求更改图像和内容

<div class="container">
    <img src="http://google.com/images/srpr/logo11w.png" alt="#" class="myimg" /> 
   <div class="cont">
    <h1 class="heading">HEADLINE</h1>
<p class="text">

 Some content Some content Some content Some content Some content Some content Some content Some content Some content 

</div> 
    </div>
</div> 

CSS     .myimg {         宽度：200像素;         保证金：10px的     }

.text{
    text-align:justify;
}
.cont{
    display:inline-block;
    width:300px
}

Answer 5

<强> DEMO

使用相同的旧表技术。

HTML：

<div class="container">
    <div class="img">
        <img src="http://placehold.it/250x250" alt="#" />
    </div>
    <div class="text">headline and text below it</div>
</div>

CSS：

.container {
    display:table-row;
}
.img, .text {
    display:table-cell;
}
.text {
    vertical-align: middle;
}
.img {
    padding-right: 10px;
}

Answer 6

的 Demo

According to the HTML spec，<span>是内联元素，<div>是块元素。现在可以使用display CSS属性进行更改，但存在一个问题：就HTML验证而言，您无法将块元素放在内联元素中，因此：

<span>...<div>foo</div>...</span>

即使您将<div>更改为inline或inline-block，

也不会完全有效。

因此，如果您的元素为inline或inline-block，请使用<span>。如果它是block级元素，请使用<div>。

HTML

<div class="container"> 
    <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
 <span id="text">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
      </div>
   </span>
</div>

CSS

.container {
    text-align: center;
    width: 600px;
    margin:auto;
    border: 1px solid black;
}
.container span {
    display: inline-block;
    vertical-align: middle;
}
.container #text {
    border: 1px solid red;
    /* to show the centering */
}
.cv {
    display: table;
    margin: 0 auto;
    text-align: left;
}
.photo {
    border: 1px solid green;
    /* to show the centering */
}