对齐三个 div：其中一个包含图像，另外两个包含文本答案

【问题标题】：Align three divs: one of them containing an image and the other two text对齐三个 div：其中一个包含图像，另外两个包含文本
【发布时间】：2011-12-14 20:45:18
【问题描述】：

我正在尝试并排对齐三个 div。中心 div 包含一个带图像的 href，用于扩展链接以编辑文本。问题是我无法垂直对齐这些 div 的内容。左、右和中心 div 的内容都应该在中间垂直对齐，例如：

[右]
[左] [中] [右]
[右]

它也可能看起来像：

[左]
[左] [右]
[左] [中] [右]
[左] [右]
[左]

但现在看起来像：

[左] [中] [右]
[左] [右]
[左]

编辑内容 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;
}

【问题讨论】：

有很多关于垂直居中 div 的帖子。请使用本网站的搜索机制或参考jakpsatweb.cz/css/css-vertical-center-solution.html（我在谷歌上的第一次点击）。
有比这更好的方法。
我也在寻找那个确切的页面，但这不是我想要的。

标签： css html vertical-alignment

【解决方案1】：

为了使div 的内容居中对齐，我已经这样做了：

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

【讨论】：

【解决方案2】：

很简单，你需要做一些调整，但你的想法是将它分成三个部分

顶部中间底部

然后您可以将第一个块浮动到顶部块的右侧，然后在中间推3块然后将另一个浮动到底部块内的右侧。（如果我的代码不起作用，对不起，我没有测试它，但想法就在那里）

最好用我所谓的“包装”来分解。

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

【讨论】：

这基本上就是我现在所拥有的。但我不想有一个固定的高度。我正在考虑将这三个 div 垂直对齐在中间。如果我从您的解决方案中删除高度属性，则 div 将在顶部对齐。另一种解决方案是为这三个 div 设置一个固定的高度，并使 div 的内容在中间垂直对齐，但如果可能的话，我希望第一个选项:) 顺便说一句对不起我的英语，我希望有人懂XD

【解决方案3】：

这是你可以参考的例子

<!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>

【讨论】：