Блог

Главная - Вопросы по программированию - Выровняйте три раздела: один из них содержит изображение, а два других — текст

Выровняйте три раздела: один из них содержит изображение, а два других — текст

#css #html #vertical-alignment

#css — код #HTML #выравнивание по вертикали

Вопрос:

Я пытаюсь выровнять три раздела рядом друг с другом. Центральный div содержит ссылку href с изображением, которая расширяет ссылки для редактирования текста. Проблема в том, что я не могу выровнять содержимое этих разделов по вертикали. Все содержимое левого, правого и центрального разделов должно быть выровнено по вертикали посередине следующим образом::

[справа]
[слева] [по центру] [справа]
[правильно]

Это также может выглядеть примерно так:

[слева]
[слева] [справа]
[слева] [в центре] [справа]
[слева] [справа]
[слева]

Но теперь это выглядит так:

[слева] [по центру] [справа]
[слева] [справа]
[слева]

Раздел редактирования содержимого лежит

Пока что это код:

 <div id="search-result" class="accordion">
            <div class="search-result-left">
                <p>CEPT, Conference Europamp;eacute;enne des Adminidstra-</p>
                <p>tion Despostes et des Tamp;eacute;lamp;eacute;communications</p>
            </div>
            <div class="search-result-right">
                <p>Evropsko združenje poamp;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;
}

Комментарии:

1. Было сделано МНОГО сообщений о вертикальном центрировании div. Пожалуйста, воспользуйтесь механизмом поиска на этом веб-сайте или обратитесь к jakpsatweb.cz/css/css-vertical-center-solution.html (первый хит, который я получил в Google).

2. Есть лучшие способы сделать это, чем это.

3. Я также искал именно эту страницу, но это не совсем то, что я хочу.

Ответ №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>

Комментарии:

1. Это в основном то, что у меня есть сейчас. Но я не хочу иметь фиксированную высоту. Я думал выровнять эти три раздела вертикально посередине. Если я удалю атрибут высоты из вашего решения, разделы будут выровнены по верху. Другим решением было бы установить фиксированную высоту для этих трех разделов и выровнять содержимое разделов по вертикали посередине, но я надеялся на первый вариант, если это возможно 🙂 Кстати, извините за мой английский, я надеюсь, что есть кто-то, кто это понимает.

Ответ №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>
Метки: