對齊三個div：其中一個包含圖像和另外兩個文本

我想並排對齊三個div。中心div包含一個帶圖像的href，它擴展了編輯文本的鏈接。問題是我無法垂直對齊這些div的內容。左，右和中間格的內容都應該verticaly中間對齊，如：對齊三個div：其中一個包含圖像和另外兩個文本

[右]
[左] [心] [右]
[右]

它也可能看起來像：

[左]
[左] [右]
[左] [心] [右]
[left] [right]
[左]

但現在它看起來像：

[左] [心] [右]
[左] [右]
[左]

編輯內容div位於

這是迄今爲止的代碼：

<div id="search-result" class="accordion"> 
      <div class="search-result-left"> 
       <p>CEPT, Conference Europ&eacute;enne des Adminidstra-</p> 
       <p>tion Despostes et des T&eacute;l&eacute;communications</p> 
      </div> 
      <div class="search-result-right"> 
       <p>Evropsko združenje po&scaron;tnih in telekomunikaci-</p> 
       <p>jskih organizacij</p> 
      </div> 
      <div class="search-result-center"> 
       <a href="#" class="acc"><img src="CSS/images/arrow_wr.gif"/></a> 
      </div> 
     <div class="edit-content"> 
      <p><a href="#">edit</a> - 
       <a href="#">comment</a> - 
       <a href="#">translate</a> 
      </p> 
     </div> 
    </div>

和css：

#all-search-results { 
font-size: 14px; 
color: #000000; 
width: 730px; 
margin: 0 auto; 
line-height: 4px; 
} 
.search-result-left { 
text-align: right; 
float: left; 
width: 335px; 
} 
.search-result-center { 
text-align: center; 
margin: 0 auto; 
width: 60px; 
} 
.search-result-center img{ 
vertical-align: bottom; 
} 
.search-result-right { 
text-align: left; 
float: right; 
width: 335px; 
} 
.edit-content{ 
color: #669900; 
margin-top: 20px; 
} 
.edit-content a { 
color: #669900; 
}

來源

2011-10-25 Alko

目前已經取得的職位了很多關於垂直居中一個div的例子。請使用本網站上的搜索機制，或者參考http://www.jakpsatweb.cz/css/css-vertical-center-solution.html（我第一次登陸Google）。 – Jules

有比這更好的方法來做到這一點。 –

我也在看那個確切的頁面，但那不完全是我想要的。 – Alko

要居中對齊div的內容我已經做到了這一點：

.myDiv { 
    min-height: 10em; 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2011-10-25 11:24:36

簡單，你貢納必須做一些調整，但這個想法是你把它分成三部分

top middle 底部

然後，您可以將第一個塊漂浮在頂部塊的右側然後在中間推入3個塊然後在底部塊的右側內部漂浮另一個塊。（如果我的代碼dosn't工作抱歉，我沒有測試過，但這個想法在那裏）

總是最好打破我所謂的'包裝'的東西。

.Wrap{ 
    position: relative; 
    height: 100px; width: auto; 
    background: red; 
} 
.rightContent{ 
    float: right; 
    height: 100px; width: 200px; 
    background: blue; 
} 
#left{ 
    float: left; width: 200px; height: 100px; background: green; 
} 
#center{ 
    float: left; width: 200px; height: 100px; background: yellow; 
} 
#right{ 
    float: left; width: 200px; height: 100px; background: grey; 
}

的Html

<div class="Wrap"> 
    <div class="rightContent">top right</div> 
</div> 

<div class="Wrap"> 
    <div id="left">mid left</div> 
    <div id="center">mid center</div> 
    <div id="right">mid right</div> 
</div> 

<div class="Wrap"> 
    <div class="rightContent">bottom right</div> 
</div>

來源

2011-10-25 11:42:49

這就是我現在擁有的基本原理。但我不想有一個固定的高度。我正在考慮把這三個div放在中間。如果我從解決方案中刪除高度屬性，則div將對齊頂部。另一個解決辦法是有這三個div的固定高度，並且使內容的div博中間verticaly對齊，但我希望第一個選項，如果可能的話:)對不起，我的英語順便說一下，我希望有人瞭解它XD – Alko

這裏是你可以參考這個

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Universal vertical center with CSS</title> 
    <style> 
    .greenBorder {border: 1px solid green;} /* just borders to see it */ 
    </style> 
</head> 

<body> 
    <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 
</body> 
</html>

來源

2011-10-25 11:48:42

對齊三個div：其中一個包含圖像和另外兩個文本

回答

相關問題