Question

我试图将三个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;
}

Answer 1

要居中对齐div的内容，我已完成此操作：

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

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

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

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

3 个答案: