html - 如何使左侧的img和右侧的文本垂直对齐

Question

css

.container{
   height: 250px;
   padding 10px 0;
}
.col-left{
   display: inline-block;
   background-image:url("support.png");
   height:235px; 
   width:300px;
}

.col-right{
   display: inline-block;
   width:600px;
}

html

<div class="container">
    <div class="col-left"></div>
    <div class="col-right">
       <h1>this is my title</h1>
       <p>to reach their Potential</p>
    </div>
</div>

问题：

我想要左边的img和右边的文本

1. 显示在同一行。

2. 垂直排列（文本出现在 img 的中间位置） 我该怎么做？

Answer 1

这是你想要实现的代码试试这个我刚刚添加了一个用于显示垂直对齐的 div 使用它并让我知道 Html 代码是

<div class="container">
   <div class="col-left"></div>
    <div class="col-right">
        <div class="col-right-wrap">
            <h1>this is my title</h1>
            <p>to reach their Potential</p>
        </div>
   </div>
</div> 

和CSS

.container{
    height: 250px;
    padding 10px 0;
}
.col-left { 
    float:left; /*give a direction where you want */
    display: inline-block;
    background-image:url("images/support.png");
    height:235px; 
    width:300px; 
}
.col-right {
    float:left; /*give a direction where you want */
    display: inline-block;
    width:600px;
}
/* align however you want adjust this below code according to you */
.col-right-wrap{
    display:table-cell; 
    vertical-align:middle;
}

Answer 2

我认为这样的事情应该是你想要的：

HTML：

<div class="container">
    <div class="col-left">
        <img src="http://placehold.it/300x235" />
    </div>
    <div class="col-right">
         <h1>this is my title</h1>

        <p>to reach their Potential</p>
    </div>
</div>

CSS：

.container {
    width:100%;
    height: 250px;
    padding 10px 0;
}
.col-left {
    float:left;
    background-image:url("support.png");
    height:235px;
    width:300px;
}
.col-right {
    float:left;
    width: 600px;
    padding-top: 50px;
}

现场演示

请注意，对于文本的放置，我使用了填充，这可能不是一个理想的解决方案。

Answer 3

据我了解您的问题，我发现Float可以解决您的问题。浮点数与inline-block. 您可以从此网址了解更多信息http://www.vanseodesign.com/css/inline-blocks/

因此，就我的知识音乐会而言，我将寻求以下解决方案，希望这会对您有所帮助。

CSS：

.container {width:100%;height: 250px;padding 10px 0;}
.col-left {float:left;background-image:url("support.png");height:235px; width:30%;}
.co-right {float:left;width:70%}

JSFiddle：http: //jsfiddle.net/ugQCU/

Answer 4

我想这就是你想要的。现场演示

.container {
    height: 250px;
    padding 10px 0;
}
.col-left {
    display: inline-block;
    background-image:url("http://www.lois-systems.co.uk/wp-content/uploads/2012/08/support.png");
    height:235px;
    width:300px;
    vertical-align:middle;
}
.col-right {
    display: inline-block;
    width:600px;
    vertical-align:middle;
}
.col-right h1, .col-right p {
    margin:0;
}

Answer 5

HTML代码和CSS一样：

.container {
    position: relative;
    height: 235px;
    padding 10px 0;
}
.col-left {
    position: absolute;
    background: #AAA;
    height:235px;
    width:300px;
}
.col-right {
    display: table-cell;
    vertical-align: middle;
    height: 235px;
    padding-left: 310px;
}

演示：http: //jsfiddle.net/zWNCP/2/