当前位置：文江博客话题详情

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

发布于 2024-12-11 12:40:43 字数 2124 浏览 1 评论 0原文

我正在尝试并排对齐三个 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;
}

原文

I am trying to align three divs side by side. The center div contains a href with image, that expands links to edit text. The problem is that I am unable to verticaly align the contents of those divs. The left, right and center div contents should all be verticaly aligned in the middle like:

[right]
[left] [center] [right]
[right]

It might also look something like:

[left]
[left] [right]
[left] [center] [right]
[left] [right]
[left]

But now it looks like:

[left] [center] [right]
[left] [right]
[left]

The edit-content div lies

This is the code so far:

<div id="search-result" class="accordion">
            <div class="search-result-left">
                <p>CEPT, Conference Européenne des Adminidstra-</p>
                <p>tion Despostes et des Télécommunications</p>
            </div>
            <div class="search-result-right">
                <p>Evropsko združenje poš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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年少掌心 2024-12-18 12:40:43

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

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

To center align the contents of a div I've done this:

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

回复收藏 0 原文

假装不在乎 2024-12-18 12:40:43

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

部分
中间
然后，您可以在底部

将第一个块浮动到顶部块的右侧，
然后在中间推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;
}

网页

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

Easy, you're gunna have to do some tweaking but the idea is you split it into three parts

top
middle
Bottom

you can then float the first block over to the right in the top block,
then shove 3 blocks in the middle
then float another one to the right inside the bottom block.
(if my code dosn't work sorry I haven't tested it, but the idea is there)

It's always best to break things up in what I call 'wraps'.

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

回复收藏 0 原文

北斗星光 2024-12-18 12:40:43

这是一个例子，你可以参考这个

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

Here is the example you can refer this

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

回复收藏 0 原文

~没有更多了~