css中的垂直对齐方式

我正在使用引导程序。这里是我使用的代码示例。css中的垂直对齐方式

<div class="row"> 
    <div class="col-lg-6"><img src="#" alt=""></div> 
    <div class="col-lg-6"> 
     <h2>Heading</h2> 
     <p>Some Text</p> 
     <p>Some more text</p> 
    </div> 
</div>

这些p标签有多行文字。左侧的图像比文字区域大得多，所以我希望这些元素垂直对齐。这是我曾尝试：

1. The table/table-cell trick. 
2. The transform/Translatey trick. 
3. Setting margin-top to 50% (didn't think that would work). 
4. flex and align-items/justify-content.

问题是这样的，父元素不会有高度，所以每一个解决方案，我发现通过网上和StackOverflow上似乎并没有为我工作。我很欣赏这方面的任何帮助。任何帮助将不胜感激。

在此先感谢

来源

2016-11-08 A. Wilkinson

如果你可以用这些段落为div那么你可以使用下面的解决方案。 col-lg-6更改为col-xs-6只是为了在代码段中显示左右布局。

.outer { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.middle { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row outer"> 
 
    <div class="col-xs-6 middle"><img src="https://s-media-cache-ak0.pinimg.com/236x/f6/16/d0/f616d044c7937dde2e8ec2b4f3e6f79c.jpg" alt=""></div> 
 
    <div class="col-xs-6 middle"> 
 
     <div class="inner"> 
 
     <h2>Heading</h2> 
 
     <p>Some Text</p> 
 
     <p>Some more text</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

来源

2016-11-08 05:23:52

css中的垂直对齐方式

回答

相关问题