如何使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在左側和右側的文本垂直對齊

回答

相關問題