Предотвратить переменный размер div от центрированного изображения

0

В приведенном ниже коде у меня есть 3 divs, где 1-й и 3-й divs - это таблицы, которые заполняются текстом разной длины (определяется пользователем) для пользователя. Второй div - это изображение. Когда пользователь отправляет и текст заполняется в таблицы, центральное изображение (2-й div) перемещается в зависимости от текста. Например, если самое длинное слово из обеих таблиц находится в левой таблице, изображение будет сдвигаться вправо вместе с правой таблицей. Если самое длинное слово в каждой таблице одинаковой длины, ничего не сдвинется.

Как я могу обеспечить, чтобы второй div оставался центрированным независимо от длины текста в divs по обе стороны от него?

   <div class="text_tables" id="left_table">
            <table>
                <tr><td><span class = "output render" id = "text1"></span></td></tr>
                <tr><td><span class = "output render" id = "text2"></span></td></tr>
                <tr><td><span class = "output render" id = "text3"></span></td></tr>
                <tr><td><span class = "output render" id = "text4"></span></td></tr>
            </table>  
        </div>  
        <div class="text_tables">
            <img id="doge1" src="{{ url_for('static', filename='img/doge1.png') }}">
            <img id="doge2" src="{{ url_for('static', filename='img/doge2.jpg') }}">
            <img id="doge3" src="{{ url_for('static', filename='img/doge3.jpg') }}">
        </div>
        <div class="text_tables" id="right_table">
            <table>
                <tr><td><span class = "output render" id = "text6"></span></td></tr>
                <tr><td><span class = "output render" id = "text7"></span></td></tr>
                <tr><td><span class = "output render" id = "text8"></span></td></tr>
                <tr><td><span class = "output render" id = "text9"></span></td></tr>     
            </table> 
        </div>

Вот весь CSS, который влияет на вышеперечисленное:

.text_tables {
  display: inline-block;
  text-align: center;
}

#left_table{
  margin-right: 50px;
}

#right_table{
  margin-left: 50px;
}
div.jumbo {
  padding: 10px 0 30px 0;
  background-color: #eeeeee;
}
  • 0
    Вы должны включить немного CSS в то, что вы уже пробовали, чтобы у нас было немного больше.
  • 0
    CSS был добавлен выше.
Теги:

1 ответ

1

Так скажи мне, это прекрасно? :) http://jsfiddle.net/UqRAc/

Вы должны поместить все это в один div, после этого giv, который разделит некоторый класс и добавит display: table; на этом классе. Все вы хотите, чтобы центр был посередине, вы должны добавить отображение: table-cell; и выравнивание по вертикали: среднее;

.tables {
    display: table;
}
#left_table {
    width:30%;
    display: table-cell;
}
#image-set {
    display: table-cell;
    vertical-align: middle;
}
#right_table {
    display: table-cell;
    width: 30%;
}

И это все :)

Поделиться
  • 0
    Спасибо за это, но это не работает должным образом. Изображение не остается в центре, а таблицы не находятся по обе стороны от изображения
  • 0
    @Barnaby Вы можете добавить text-align: center; #image-set в приведенном выше коде Джозефина, и он будет держать ваши изображения по центру. Что касается таблиц не на каждой стороне, я смотрю на скрипку, и они находятся на каждой стороне соответственно с изображениями div в мертвой точке. Возможно, какой-то другой CSS может конфликтовать на вашей стороне?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню