如何使IMG在左侧和右侧的文本垂直对齐

CSS如何使IMG在左侧和右侧的文本垂直对齐

.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的中间位置）我该怎么做？

来源

2013-05-02 user2243528

你能否给我们链接到'jsfiddle.net'。它会帮助我们明白你的问题，显然！ – 2013-05-02 10:59:30

您是否尝试过使用[float]（http://www.w3.org/TR/CSS2/visuren.html#float-position）？ – NINCOMPOOP 2013-05-02 10:59:33

修复你的CSS中的大量拼写错误和语法错误将是一个很好的开始... – BenM 2013-05-02 11:01:06

我想这就是你想要的。Live Demo

.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; 
}

来源

2013-05-02 11:15:06

它似乎工作，但为什么你把这一行.col-right {vertical-align：middle;}和margin： 0;？ – user2243528 2013-05-02 11:36:19

据我了解您的问题，我发现Float将解决您的问题。浮动与inline-block相同。你可以从这个URL了解更多关于这个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/

来源

2013-05-02 11:10:19

现在它们显示在同一行上，但文本排列在img的顶部，我如何使文本与img中间排成一行？ – user2243528 2013-05-02 11:13:19

您可以随时在“col-right”中添加一些填充 – 2013-05-02 11:15:37

@ user2243528：您可能需要按照您的要求更新CSS填充。 – 2013-05-03 06:27:59

这里是你想要达到试试这个我刚刚加入一个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; 
}

来源

2013-05-02 11:12:20

display：table-cell; vertical-align：middle;不工作的方式应该是，文字不显示在img – user2243528 2013-05-02 11:26:09

中间请创建一个小提琴 – 2013-05-02 11:28:25

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/

来源

2013-05-02 11:26:14 bbosternak

我觉得这样的事情应该是你想要什么：

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; 
}

LIVE DEMO

请注意，我用的填充文字的位置，这可能不是一个理想的解决方案。

来源

2013-05-02 11:27:03

如何使IMG在左侧和右侧的文本垂直对齐

回答

相关问题